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布局

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