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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/25875.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LLM Algorithms(1): Flash Attention

LLM Algorithms(1): Flash Attention

目录 Background Flash Attention Flash Attention Algorithm 参考 NIPS-2022: Flash Attention: Fast and Memory-Efficient Exact Attention with IO-Awareness idea&#xff1a;减少资源消耗&#xff0c;提升或保持模型性能。普通attention的空间复杂度是 --》降低到F…
阅读更多...
数据结构复习笔记

数据结构复习笔记

简答题 (3) 顺序表和链表的概念及异同 顺序表: 把逻辑上相邻的结点储存在物理位置上的相邻储存单元中&#xff0c;结点的逻辑关系由储存单元的邻接关系来体现.链表: 逻辑上相邻的结点存储再物理位置上非连续非顺序的存储单元中, 结点的逻辑关系由指向下一个结点的指针确保.相…
阅读更多...
抓包工具 HttpAnalyzerFull_V7.6.4 的下载、安装、使用

抓包工具 HttpAnalyzerFull_V7.6.4 的下载、安装、使用

目录 一、简介二、下载和安装三、如何注册四、使用介绍4.1 开始、停止、清空监控内容4.2 筛选监控内容4.3 监控内容显示 一、简介 Http Analyzer 是一款功能强大的数据包分析工具&#xff0c;它可以实时监控服务器返回的消息&#xff0c;支持64位Windows系统&#xff0c;可以同…
阅读更多...
kaggle竞赛实战9——模型融合

kaggle竞赛实战9——模型融合

有三种方法&#xff0c; 第一种&#xff1a;均值融合&#xff0c;代码如下 data pd.read_csv(\ result/submission_randomforest.csv\ ) data[randomforest] data[target].values temp pd.read_csv(\ result/submission_lightgbm.csv\ ) …
阅读更多...
C++必修：探索C++的内存管理

C++必修：探索C++的内存管理

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. C/C的内存分布 我们首先来看一段代码及其相关问题 int globalVar 1; static…
阅读更多...
微信小程序毕业设计-网吧在线选座系统项目开发实战(附源码+论文)

微信小程序毕业设计-网吧在线选座系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…
阅读更多...
力扣 T62 不同路径

力扣 T62 不同路径

题目 连接 思路 思路1 &#xff1a; BFS爆搜 class Solution { public:queue<pair<int,int>>q;int uniquePaths(int m, int n) {q.push({1,1}); // 起始位置vector<pair<int, int>> actions;actions.push_back({0, 1}); // 向下actions.push_bac…
阅读更多...
【网络编程开发】11.IO模型 12.IO多路复用

【网络编程开发】11.IO模型 12.IO多路复用

11.IO模型 什么是IO: IO 是 Input/Output 的缩写&#xff0c;指的是输入和输出。在计算机当中&#xff0c;IO 操作通常指将数据从一个设备或文件中读取到计算机内存中&#xff0c;或将内存中的数据写入设备或文件中。这些设备可以包括硬盘驱动器、网卡、键盘、屏幕等。 通常用…
阅读更多...
selenium自动化测试入门 —— Alert/Confirm/Prompt 弹出窗口处理！

selenium自动化测试入门 —— Alert/Confirm/Prompt 弹出窗口处理！

一、Alert/Confirm/Prompt弹出窗口特征说明 Alert弹出窗口&#xff1a; 提示用户信息只有确认按钮&#xff0c;无法通过页面元素定位&#xff0c;不关闭窗口无法在页面上做其他操作。 Confirm 弹出窗口&#xff1a; 有确认和取消按钮&#xff0c;该弹出窗口无法用页面元素定…
阅读更多...
06_深度学习历史的里程碑--重读AlexNet

06_深度学习历史的里程碑--重读AlexNet

1.1 介绍 AlexNet是深度学习历史上一个非常重要的卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;模型&#xff0c;由Alex Krizhevsky、Ilya Sutskever和Geoffrey Hinton在2012年设计并提出。它因在ImageNet大规模视觉识别挑战赛中的卓越表现而闻名&a…
阅读更多...
2024世界技能大赛某省选拔赛“网络安全项目”B模块--数据包分析(jsp流量解密)

2024世界技能大赛某省选拔赛“网络安全项目”B模块--数据包分析(jsp流量解密)

2024世界技能大赛某省选拔赛“网络安全项目”B模块--数据包分析② 任务一、网络数据包分析取证解析：任务一、网络数据包分析取证解析： A 集团的网络安全监控系统发现有恶意攻击者对集团官方网站进行攻击，并抓取了部分可疑流量包。请您根据捕捉到的流量包，搜寻出网络攻击线…
阅读更多...
冯喜运：6.10周一黄金还会再次拉升吗？日内黄金原油操作策略

冯喜运：6.10周一黄金还会再次拉升吗？日内黄金原油操作策略

【黄金消息面分析】&#xff1a;周一(6月10日)亚市盘中&#xff0c;现货黄金交在上周五暴跌后仍然承压&#xff0c;目前金价位于2294美元/盎司左右。因强劲非农数据刺激美元大涨&#xff0c;现货黄金上周五出现暴跌。此外&#xff0c;上周五数据显示&#xff0c;最大黄金消费国…
阅读更多...
在python中关于元组的操作

在python中关于元组的操作

创建元组 如上图所示&#xff0c;a&#xff08;&#xff09;和b tuple(),,这两种方式都可以创建出元组。 在创建元组的时候&#xff0c;指定初始值 如上图所示&#xff0c;也可以在创建元组的时候&#xff0c;指定初始值。 同列表一样元组中的元素也可以是任意类型的。 同列…
阅读更多...
Qt 布局管理

Qt 布局管理

布局基础 1）Qt 布局管理系统使用的类的继承关系如下图： QLayout 和 QLayoutItem 这两个类是抽象类，当设计自定义的布局管理器时才会使用到，通常使用的是由 Qt 实现的 QLayout 的几个子类。 2）Qt 使用布局管理器的步骤如下： 首先创建一个布局管理器类的对象。然后使用该…
阅读更多...
封装了一个简单理解的iOS竖直文字轮播

封装了一个简单理解的iOS竖直文字轮播

效果图 原理 就是持有两个视图&#xff0c;并且两个视图同时改变origin.y 动画结束之后&#xff0c;判断哪个视图是在上面并且看不到的&#xff0c; 则将该视图移动到底部&#xff0c;并且该视图展示下一跳内容 在开始下一轮动画 代码 - (void)startAnimationWithDuration:(…
阅读更多...
【Linux】网络配置（静态/动态/手动/nmcli）

【Linux】网络配置（静态/动态/手动/nmcli）

目录 一、手动修改网络配置文件&#xff1a;静态 二、手动修改网络配置文件&#xff1a;动态 三、nmcli工具命令修改网络配置文件&#xff1a;静态 四、nmcli工具命令修改网络配置文件&#xff1a;动态 错误排查分析&#xff1a;编辑虚拟网络编辑器不生效 1、排除VMware启…
阅读更多...
攻防世界---misc---gif

攻防世界---misc---gif

1、题目描述 2、下载附件&#xff0c;是一堆黑白图片&#xff0c;看到这里我一头雾水 3、看别人写的wp&#xff0c;说是白色表示0&#xff0c;黑色表示1。按照顺序写出来后得到 4、解码的时候&#xff0c;把逗号去掉。二进制转字符串得到&#xff1a; 5、 flag{FuN_giF}
阅读更多...
阿里通义千问 Qwen2 大模型开源发布

阿里通义千问 Qwen2 大模型开源发布

阿里通义千问 Qwen2 大模型开源发布 Qwen2 系列模型是 Qwen1.5 系列模型的重大升级。该系列包括了五个不同尺寸的预训练和指令微调模型&#xff1a;Qwen2-0.5B、Qwen2-1.5B、Qwen2-7B、Qwen2-57B-A14B 以及 Qwen2-72B。 在中文和英文的基础上&#xff0c;Qwen2 系列的训练数…
阅读更多...
深度学习与人工智能

深度学习与人工智能

深度学习&#xff0c;是一种特殊的人工智能&#xff0c;他与人工智能及机器学习的关系如下&#xff1a; 近些年来&#xff0c;基于人工神经网络的机器学习算法日益盛行起来&#xff0c;逐渐呈现出取代其他机器学习算法的态势&#xff0c;这主要的原因是因为人工神经网络中有一中…
阅读更多...
php高级之框架源码、宏扩展原理与开发

php高级之框架源码、宏扩展原理与开发

在使用框架的时候我们经常会看到如下代码 类的方法不会显示地声明在代码里面&#xff0c;而是通过扩展的形式后续加进去&#xff0c;这么做的好处是可以降低代码的耦合度、保证源码的完整性、团队开发的时候可以分别写自己的服务去扩展类&#xff0c;减少代码冲突等等。我自己…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023