Angular4指令(Directive)

1.Angular4指令分类

• 组件（Component directive）：UI组件，继承于Directive；
• 属性指令（Attribute directive）：改变组件的样式；
• 结构指令（Structural directive）：改变DOM布局；

2.组件（Component directive）

• 代码实例

  import { Component } from '@angular/core';
  
  @Component({
  selector: 'app-root',// 定义组件在HTML代码中匹配的标签
  template: `<h1>Hello {{World}}</h1>`,// 指定组件关联的内联模板
  })
  export class AppComponent  {
  name = 'World'; 
  }

• 组件的组成：@Component()里里里面的Template(HTML,CSS)；以及export class组件里的属性和方法；
  

3.属性指令（Attribute directive） ：主要改变组件的样式

• 主要包括ngStyle 和 ngClass；

  //ngStyle
  <ul *ngFor="let person of people">
      <li [style.color]="getColor(person.country)">
         {{ person.name }} ({{person.country}})
      </li>
  </ul>
  //ngClass
  <div [ngClass]="{'text-success': person.country === 'CN'}"></div>

4.结构指令（Structural directive） ：主要改变DOM的结构

• 主要包括ngIf 、 ngFor 和 ngSwitch；

  //ngIf
  <div *ngIf="person.country === 'CN'">{{ person.name }} ({{person.country}})</div>
  //ngFor
  <div *ngFor="let person of people">{{person.name}}</div>
  //ngSwitch
  <ul [ngSwitch]='person.name'>
  <li *ngSwitchCase="Lily" class='text-success'>
      {{ person.age}}
  </li>
   <li *ngSwitchCase="'Tom'" class='text-secondary'>
      {{ person.age}} 
  </li>
  <li *ngSwitchDefault class='text-primary'>
    {{ person.age}} 
  </li>
  </ul>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!