当前位置: 首页 > news >正文

angular2开发知识点

目录

文章目录

    • 一、API 网关地址 配置
    • 二、服务注册使用
    • 三、模块组件注册使用
    • 四、html中style类动态绑定
      • 1. 单个类的绑定:[class.special]="isSpecial"
      • 2. 多个类的绑定:[ngClass]="{'selected':status === '','saveable': this.canSave,}"
      • 3. 单个内联样式绑定:[style.color]="isSpecial ? 'red': 'green'"
      • 4. 多个内联样式绑定:[ngStyle]="currentStyles"
    • **angular2 第三方插件的使用**
      • 1. 安装插件:
      • 2. 模块中引入prime
      • 3. 在组件中使用插件
    • angular中阻止点击事件冒泡

一、API 网关地址 配置

cloudlink-front-framework/config/webpack.dev.js

# line 13 ~ 19
/*** Webpack Constants */
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const HMR = helpers.hasProcessFlag('hot');# line 150 ~ 171
devServer: {port: METADATA.port,host: METADATA.host,historyApiFallback: {index: '/index.html'},watchOptions: {aggregateTimeout: 300,poll: 1000},proxy: {'/cloudlink/v1/**': {target: 'http://192.168.100.90:8050',// target: 'http://192.168.120.110:8050',// target: 'http://192.168.20.221:8901', //赵杨 ip// target: 'http://192.168.100.212:8050',secure: false,pathRewrite: { '^/cloudlink/v1': '' }}}},

二、服务注册使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如上图所示,先有一个模型跟服务,需要在enterprise-auth/enterprise-authed-approve里面使用:
模型使用:

# enterprise-admin/enterprise-auth/enterprise-authed-approve/enterprise-authed-approve.component.ts 
# 只需要在这个文件中写如下代码即可:
import {EnterpriseAdminModel} from "../shared/enterprise-admin.model";

服务的使用:

注意: 如果服务里面又引入服务,那么在使用这个服务时,也要导入引入的服务。

# 服务的依赖注入: https://angular.cn/docs/ts/latest/guide/dependency-injection.html
# 方法一: 直接在组件中引入使用
# enterprise-admin/enterprise-auth/enterprise-authed-approve/enterprise-authed-approve.component.ts 
# 在文件中写入如下代码:
import {EnterpriseAdminService} from "../shared/enterprise-admin.service"; # 导入服务文件@Component({selector: "jas-enterprise-authed-approve",templateUrl: "./enterprise-authed-approve.component.html",styleUrls: ["./enterprise-authed-approve.component.css"],providers:[EnterpriseAdminService]                               # 在这里写上服务名字
})
------------------------------------------------------------------------------------------# 方法二: 在组件的所在的模块中注册服务后,在组件中直接使用
# enterprise-auth/enterprise-auth.module.ts 
# 在文件中写入如下代码:
import { EnterpriseAdminService } from './shared/enterprise-admin.service';
@NgModule({imports: [],declarations: [],providers:[EnterpriseAdminService    ]  # 引入声明
})# enterprise-auth/enterprise-authed-approve/enterprise-authed-approve.component.ts 
# 在文件中写入如下代码:
import {EnterpriseAdminService} from "../shared/enterprise-admin.service";  # 引入使用------------------------------------------------------------------------------------------
# 方法三:在组件的所在的模块中为服务申明一个名字,在子模块中直接用这个名字调用
# enterprise-auth/enterprise-auth.module.ts 
# 在文件中写入如下代码:
mport { EnterpriseAdminService } from './shared/enterprise-admin.service';
@NgModule({providers:[{provide:'view',useClass:EnterpriseAdminService} # 引入声明]  
})# enterprise-auth/enterprise-authed-approve/enterprise-authed-approve.component.ts 
# 在构造函数中直接引用:
constructor(@Inject('view') private viewService,

三、模块组件注册使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如上图所示,模块charts需要在enterprise-admin下注册使用:

# 模块的注册使用 # src/app/jasframework/enterprise-admin/charts/charts.module.ts 
import {Charts} from './charts.component';
import {ChartsRoutes} from './charts.routing'
import {NgModule}      from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({imports: [CommonModule, ChartsRoutes],declarations: [Charts],bootstrap: [Charts]
})
export default class ChartsModule {
}# src/app/jasframework/enterprise-admin/charts/charts.routing.ts
import {Routes, RouterModule} from '@angular/router';
import {Charts} from './charts.component';
const routes:Routes = [{path: '',component: Charts,children: [ ]},
];
export const ChartsRoutes = RouterModule.forChild(routes);# src/app/jasframework/enterprise-admin/charts/charts.component.ts
import {Component, OnInit} from '@angular/core';
@Component({selector: 'charts',templateUrl: 'charts.component.html',providers: [ ]
})
export class Charts implements OnInit {constructor() { }ngOnInit() { }
} # src/app/jasframework/enterprise-admin/charts/charts.component.html
<div>hello charts</div># 注册模块使之生效   
# 只需要在enterprise-admin的路由文件中注册这个路径就可以了
# src/app/jasframework/enterprise-admin/enterprise-admin.routing.ts
const routes: Routes = [{path: '', component: EnterpriseAdminComponent,children:[{path: 'charts',   # 这里是路径loadChildren: ()=>System.import('./charts/charts.module.ts'), # 指导去哪里找这个模块}]},
];

模块比组件多了xx.module.ts与xx.routing.ts两个文件。如果删除这2个文件,那么就是组件。
组件的加载使用:

# 还是以charts为例,代码在上面,少了xx.module.ts与xx.routing.ts两个文件。# 注册组件使之生效   
# 需要在enterprise-admin的路由文件中注册这个路径,在模块中也需要声明
# src/app/jasframework/enterprise-admin/enterprise-admin.routing.ts
import {Charts} from './charts/charts.component';  # 引入这个组件
const routes: Routes = [{path: '', component: EnterpriseAdminComponent,children:[{path: 'charts',   # 这里是路径component: Charts, # 指明组件}]},
];# src/app/jasframework/enterprise-admin/enterprise-admin.module.ts
import {Charts} from './charts/charts.component'; # 引入这个组件
@NgModule({imports:      [ CommonModule,EnterpriseAdminRoutes ],declarations: [ EnterpriseAdminComponent, Charts ],   # 在这里写入Charts,这里是声明bootstrap:    [ EnterpriseAdminComponent ]
})

四、html中style类动态绑定

1. 单个类的绑定:[class.special]=“isSpecial”

单个style类绑定介绍:https://angular.cn/guide/template-syntax#css-类绑定
由class前缀,一个点 (.)和 CSS 类的名字组成, 其中后两部分是可选的。形如:[class.class-name]。

// 不使用style类绑定的代码:
<!-- standard class attribute setting  -->
<div class="bad curly special">Bad curly special</div>    // 当badCurly 有值的时候,会清除所有样式类
<!-- reset/override all class names with a binding  -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>// 使用style绑定
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

当模板表达式的求值结果是真值时,Angular 会添加这个类,反之则移除它。

2. 多个类的绑定:[ngClass]=“{‘selected’:status === ‘’,‘saveable’: this.canSave,}”

参考链接:https://angular.cn/guide/template-syntax#ngclass-指令
ngClass绑定到一个key:value 形式的控制对象。这个对象中的每个 key 都是一个 CSS 类名,
如果它的 value 是true,这个类就会被加上,否则就会被移除。

// component.ts
currentClasses: {};
setCurrentClasses() {// CSS classes: added/removed per current state of component propertiesthis.currentClasses =  {'saveable': this.canSave,'modified': !this.isUnchanged,'special':  this.isSpecial};
}// component.thml
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

3. 单个内联样式绑定:[style.color]=“isSpecial ? ‘red’: ‘green’”

https://angular.cn/guide/template-syntax#样式绑定
单个内联样式绑定由style前缀,一个点 (.)和 CSS 样式的属性名组成。 形如:[style.style-property]。

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

有些样式绑定中的样式带有单位。在这里,以根据条件用 “em” 和 “%” 来设置字体大小的单位。

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

4. 多个内联样式绑定:[ngStyle]=“currentStyles”

https://angular.cn/guide/template-syntax#ngstyle-指令
NgStyle需要绑定到一个 key:value 控制对象。 对象的每个 key 是样式名,它的 value 是能用于这个样式的任何值。
下面的列子会根据另外三个属性的状态把组件的currentStyles属性设置为一个定义了三个样式的对象:

// src/app/app.component.ts
currentStyles: {};
setCurrentStyles() {// CSS styles: set per current state of component propertiesthis.currentStyles = {'font-style':  this.canSave      ? 'italic' : 'normal','font-weight': !this.isUnchanged ? 'bold'   : 'normal','font-size':   this.isSpecial    ? '24px'   : '12px'};
}// src/app/app.component.html
<div [ngStyle]="currentStyles">This div is initially italic, normal weight, and extra large (24px).
</div>

你既可以在初始化时调用setCurrentStyles(),也可以在所依赖的属性变化时调用。


angular2 第三方插件的使用

以 使用primeNG插件为例:https://www.primefaces.org/primeng/#/setup

1. 安装插件:

npm install primeng --save

2. 模块中引入prime

# src/app/advanced-research/advanced-research.module.ts
import { DropdownModule } from 'primeng/primeng';
@NgModule({imports: [DropdownModule,],providers: [],declarations: []
})
export default class advancedResearchModule { }

3. 在组件中使用插件

angular中阻止点击事件冒泡

在点击事件中调用下面方法,或者在点击事件的父元素中调用方法

// component.ts 文件中// 阻止事件冒泡public stopBubble(e) {// 如果提供了事件对象,则这是一个非IE浏览器if (e && e.stopPropagation) {// 因此它支持W3C的stopPropagation()方法e.stopPropagation();} else {// 否则,我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;}}// component.html文件中
<!--阻止事件冒泡--><ul (click)="commonService.stopBubble($event)"><div *ngFor="let subItem of item.child"><li nz-menu-item (click)="menuClick(subItem.url)" class="menu-li"><i class="anticon anticon-appstore menu-icon"></i> {{subItem.name}}</li></div></ul>

相关文章:

angular2开发知识点

目录 文章目录 一、API 网关地址 配置二、服务注册使用三、模块组件注册使用四、html中style类动态绑定1. 单个类的绑定&#xff1a;[class.special]"isSpecial"2. 多个类的绑定&#xff1a;[ngClass]"{selected:status ,saveable: this.canSave,}"3. 单个…...

【机器学习】机器学习与智能交通在智慧城市中的融合应用与性能优化新探索

文章目录 引言机器学习与智能交通的基本概念机器学习概述监督学习无监督学习强化学习 智能交通概述交通流量预测交通拥堵管理智能信号控制智能停车管理 机器学习与智能交通的融合应用实时交通数据分析数据预处理特征工程 交通流量预测与优化模型训练模型评估 智能信号控制与优化…...

走的人多了,也便成了路(七)

好多年前就听到这样的说法&#xff1a;一流的企业做标准&#xff0c;二流的企业做品牌&#xff0c;三流的企业做产品。 在通信行业待久了&#xff0c;经历了移动通信技术标准的发展历程&#xff0c;体会到很多事情没有那么神秘&#xff0c;甚至由于一些偶然因素的出现&#xff…...

UE5中在地形中加入湖、河

系统水资产添加 前提步骤123 完成 前提 使用版本 UE5.0.3,使用插件为UE内置的Water和water Extras. 步骤 1 记得重启 2 增加地形&#xff0c;把<启用编辑图层>勾选 如果地形没有勾选上编辑图层&#xff0c;那么就会导致湖、河等水景象无法融入地形。 如果忘记勾选…...

【280个shell脚本】----提示运维工作效率

1.MySQL 数据库备份单循环 #!/bin/bash DATE$(date %F_%H-%M-%S) HOSTlocalhost USERbackup PASS123.com BACKUP_DIR/data/db_backup DB_LIST$(mysql -h$HOST -u$USER -p$PASS -s -e "show databases;" 2>/dev/null |egrep -v "Database|information_schema…...

从零开始搭建Electron项目之运行例程

最好的学习方式就是&#xff1a;给一段能够运行的代码示例。 本文给出了例程资源&#xff0c;以及运行的步骤。 在国内开发electron有一点特别不好&#xff0c;就是如果不爬梯子&#xff0c;下载依赖容易出错。 一、例程资源 到如下路径下载例程到本地。 GitCode - 全球开发者…...

MySQL逻辑备份

目录 一.mysqldump 基本命令&#xff1a; 参数选项&#xff1a; 示例 备份整个数据库 备份多个数据库 备份所有数据库 仅备份数据库结构 仅备份特定表 添加选项以有效处理锁表问题 恢复数据 恢复数据库 恢复库中的表 使用source恢复 注意事项 二. mysqlpu…...

python 获取网页链接图片

python 获取 网页图片 在Python中&#xff0c;可以使用requests库获取网页内容&#xff0c;再使用BeautifulSoup解析网页&#xff0c;提取图片链接&#xff0c;最后保存图片到本地。以下是一个简单的例子&#xff1a; import requests from bs4 import BeautifulSoup import o…...

Leetcode 力扣114. 二叉树展开为链表 (抖音号:708231408)

给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&#xf…...

文刻ai工具跟绘唐AI工具有什么区别

文刻AI工具和绘唐AI工具是两种不同的人工智能工具。点击查看 文刻AI工具是一种自然语言处理工具&#xff0c;可以用于生成、修改和校对文本。它可以帮助用户更高效地写作&#xff0c;提供词汇和语法建议&#xff0c;检查拼写和语法错误&#xff0c;并提供自动补全和自动纠正功…...

手写kNN算法的实现-用欧几里德空间来度量距离

kNN的算法思路&#xff1a;找K个离预测点最近的点&#xff0c;然后让它们进行投票决定预测点的类型。 step 1: kNN存储样本点的特征数据和标签数据step 2: 计算预测点到所有样本点的距离&#xff0c;关于这个距离&#xff0c;我们用欧几里德距离来度量&#xff08;其实还有很多…...

IGraph使用实例——线性代数计算(blas)

1 概述 在图论中&#xff0c;BLAS&#xff08;Basic Linear Algebra Subprograms&#xff09;并不直接应用于图论的计算&#xff0c;而是作为一套线性代数计算中通用的基本运算操作函数集合&#xff0c;用于进行向量和矩阵的基本运算。然而&#xff0c;这些基本运算在图论的相…...

【MySQL】(基础篇五) —— 排序检索数据

排序检索数据 本章将讲授如何使用SELECT语句的ORDER BY子句&#xff0c;根据需要排序检索出的数据。 排序数据 还是使用上一节中的例子,查询employees表中的last_name字段 SELECT last_name FROM employees;输出结果&#xff1a; 发现其输出并没有特定的顺序。其实&#xf…...

C++ C_style string overview and basic Input funcitons

write in advance 最近在做题&#xff0c;遇到一个简单的将console的输入输出到文件中的简单题目&#xff0c;没有写出来。悔恨当初没有踏实地总结string 相关的 I/O 以及与文件的操作。这篇文章旨在记录基础的字符I/O, 简单常用的文件I/O操作函数。 当然&#xff0c;你会说C…...

VS2022+Qt雕刻机单片机马达串口上位机控制系统

程序示例精选 VS2022Qt雕刻机单片机马达串口上位机控制系统 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《VS2022Qt雕刻机单片机马达串口上位机控制系统》编写代码&#xff0c;代码整洁&a…...

Android Ble低功耗蓝牙开发

一、新建项目 在Android Studio中新建一个项目&#xff0c;如下图所示&#xff1a; 选择No Activity&#xff0c;然后点击Next 点击Finish&#xff0c;完成项目创建。 1、配置build.gradle 在android{}闭包中添加viewBinding&#xff0c;用于获取控件 buildFeatures {viewB…...

Visual Studio的快捷按键

Visual Studio的快捷按键对于提高编程效率至关重要。以下是一些常用的Visual Studio快捷按键&#xff0c;并按照功能进行分类和归纳&#xff1a; 1. 文件操作 Ctrl O&#xff1a;打开文件Ctrl S&#xff1a;保存文件Ctrl Shift S&#xff1a;全部保存Ctrl N&#xff1a;…...

【WEB系列】过滤器Filter

Filter&#xff0c;过滤器&#xff0c;属于Servlet规范&#xff0c;并不是Spring独有的。其作用从命名上也可以看出一二&#xff0c;拦截一个请求&#xff0c;做一些业务逻辑操作&#xff0c;然后可以决定请求是否可以继续往下分发&#xff0c;落到其他的Filter或者对应的Servl…...

[书生·浦语大模型实战营]——LMDeploy 量化部署 LLM 实践

1.基础作业 1.1配置 LMDeploy 运行环境 创建开发机 创建新的开发机&#xff0c;选择镜像Cuda12.2-conda&#xff1b;选择10% A100*1GPU&#xff1b;点击“立即创建”。注意请不要选择Cuda11.7-conda的镜像&#xff0c;新版本的lmdeploy会出现兼容性问题。其他和之前一样&…...

TiDB-从0到1-配置篇

TiDB从0到1系列 TiDB-从0到1-体系结构TiDB-从0到1-分布式存储TiDB-从0到1-分布式事务TiDB-从0到1-MVCCTiDB-从0到1-部署篇TiDB-从0到1-配置篇 一、系统配置 TiDB的配置分为系统配置和集群配置两种。 其中系统配置对应TiDB Server&#xff08;不包含TiKV和PD的参数&#xff0…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...