EUQI

切换主题

指令系统 ​

Angular核心概念之四：指令系统（directive） ​

NOTE

Vue.js中的常用指令： v-on、v-bind、v-for、v-if、v-show、v-hide、v-text/html...

指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。

指令类型 ​

Angular 指令的不同类型如下：

指令类型详情
组件与模板一起使用。这种类型的指令是最常见的指令类型
属性型指令改变元素、组件或其他指令的外观或行为
结构型指令通过添加和移除DOM元素来改变DOM布局

  1. 组件指令

    NG中Component继承自Directive

  2. 结构型指令

    会影响DOM树的结构，必须使用开头，如ngFor、*ngIf

  3. 属性型指令

    不会影响DOM树的结构，只是影响元素外观或行为，必须用[]括起来，如ngStyle、ngClass

指令绑定 ​

  1. 循环绑定

    *ngFor

    typescript
    <element *ngFor="let 临时变量 of 列表集合"></element>
<element *ngFor="let 临时变量 of 列表集合; let i=index"></element>
<element *ngFor="let 临时变量 of 列表集合; index as i"></element>

  2. 选择绑定

    *ngIf

    typescript
    <element *ngIf="布尔表达式"></element>
<element *ngIf="布尔表达式; else ELSE块编号"></element>
<ng-template #ELSE块编号>
  <ANY>
    ...
  </ANY>
</ng-template>

    说明：如果布尔表达式为ture则显示内容，否则当前元素从DOM树上删除

  3. 样式绑定

    • ngStyle
      typescript
      <some-element [ngStyle]="object"></some-element>
      说明：ngStyle绑定的值必须是一个对象！对象属性就是CSS样式名
    • ngClass
      typescript
      <some-element [ngClass]="object"></some-element>
      说明：ngClass绑定的值必须是一个对象！对象属性就是CSS class名，属性值为ture/false，true的话该class就出现；否则class不出现

  4. 特殊的选择绑定

    typescript
    <container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
    ...
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

  5. 双向数据绑定指令

    • ngModel
      方向一：Model => View，模型变则视图变，用[]绑定
      方向二：View =>，视图（表单元素）变则模型变，用()绑定
      typescript
      <input/select/textarea [(ngModel)] = "uname">
      注意：ngModule不在CommonModule模块中，而在FormsModule模块中，使用之前必须先导入该模块
      如果要想直接监视模型数据改变，可以绑定ngModelChange事件，支持input事件的Angular版本也可以绑定input事件

自定义指令 ​

创建指令的简单工具

ng g directive 指令名

自定义指令都是作为元素属性来使用的，selector应该是指令名

typescript
<element 指令名></element>