Angular7入门辅助教程(三)——指令

如果有任何的非技术障碍,比如如何新建Angular项目,请先到我的"Angular7入门辅助教程"专栏参考这篇博客:Angular7入门辅助教程——前篇

 

我们可以使用下面命令创建Angular指令

ng generate directive 指令名

例如,我要创建一个名叫unless的指令

ng generate directive unless

Angular就会在src/app目录下面生成两个文件:unless.directive.ts,和unless.directive.spec.ts(指令的测试文件),而且Angular CLI还会将该指令类添加到AppModule的元数据对象的declarations属性中

unless.directive.ts的内容如下

import { Directive } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {

  constructor() { }

}

Angular的指令是带有@Directive装饰器的,紧接着该装饰器后面出现的类就是指令的指令类,Angular中有三种类型的指令,你在组件和模板??这一章应该都已经见过

  • 组件——带有模板的指令,因此,组件是一种特殊的指令
  • 属性型指令,例如ngModel,用以改变元素、组件或其他指令的行为或者外观
  • 结构型指令,例如*ngIf结构型指令的标志就是左上角带*号,可以通过添加或者移除DOM元素来改变DOM布局

后面两种种指令,官方文档足够简单详细,所以我就直接引用了

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页