Angular 2 Directive

Angular 2 的指令分为以下三种：

• 组件(Component directive)：用于构建UI组件，继承于 Directive 类

• 属性指令(Attribute directive): 用于改变组件的外观或行为

• 结构指令(Structural directive): 用于动态添加或删除DOM元素来改变DOM布局

Angular 2 组件

组件示例：

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

@Component({
  selector: 'my-app', // 定义组件在HTML代码中匹配的标签
  template: `
Hello {{name}}
`, // 指定组件关联的内联模板
})
export class AppComponent  {
  name = 'Angular'; 
}

Angular 2 内置属性指令

1.ngStyle指令： 用于设定给定 DOM 元素的 style 属性

绑定常量

<div [ngStyle]="{'background-color': 'green'}">div>

绑定表达式

<div [ngStyle]="{'background-color': person.country === 'UK' ? 'green' : 'red'}">

具体示例：

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

@Component({
    selector: 'ngstyle-example',
    template: `
NgStyle
 
 
 {{ person.name }} ({{person.country}}) 
 
 `
})
export class NgStyleExampleComponent {

    getColor(country: string) {
        switch (country) {
            case 'CN':
                return 'red';
            case 'USA':
                return 'blue';
            case 'UK':
                return 'green';
        }
    }

    people: any[] = [
        {
            name: "Semlinker",
            country: 'CN'
        },
        {
            name: "Donald John Trump",
            country: 'USA'
        },
        {
            name: "Daniel Manson",
            country: 'UK'
        }
    ];
}

上面的例子，除了使用 ngStyle 指令，我们还可以使用 [style.] 的语法：

 <ul *ngFor="let person of people">
     <li [style.color]="getColor(person.country)">
        {{ person.name }} ({{person.country}})
     li>
ul>

2.ngClass指令：用于动态的设定 DOM 元素的 CSS class

绑定常量

<div [ngClass]="{'text-success': true }">div>

绑定表达式

<div [ngClass]="{'text-success': person.country === 'CN'}">div>

具体示例：

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

@Component({
    selector: 'ngclass-example',
    template: `  
NgClass
 
 
 {{ person.name }} ({{person.country}}) 
 
 `,
   
})
export class NgClassExampleComponent {

    people: any[] = [
        {
            name: "Semlinker",
            country: 'CN'
        },
        {
            name: "Donald John Trump",
            country: 'USA'
        },
        {
            name: "Daniel Manson",
            country: 'UK'
        }
    ];
}

Angular 2 内置结构指令

1.ngIf指令：根据表达式的值，显示或移除元素

<div *ngIf="person.country === 'CN'">{{ person.name }} ({{person.country}})div>

2.ngFor指令：使用可迭代的每个项作为模板的上下文来重复模板，类似于 Ng 1.x 中的 ng-repeat 指令

<div *ngFor="let person of people">{{person.name}}div>

3.ngSwitch指令：它包括两个指令，一个属性指令和一个结构指令。它类似于 JavaScript 中的 switch 语句

<ul [ngSwitch]='person.country'>
  <li *ngSwitchCase="'UK'" class='text-success'>
      {{ person.name }} ({{person.country}})
  li>
   <li *ngSwitchCase="'USA'" class='text-secondary'>
      {{ person.name }} ({{person.country}})
  li>
  <li *ngSwitchDefault class='text-primary'>
    {{ person.name }} ({{person.country}})
  li>
ul>

通过上面的例子，可以看出结构指令和属性指令的区别。结构指令是以 * 作为前缀，这个星号其实是一个语法糖。它是 ngIf 和 ngFor 语法的一种简写形式。Angular 引擎在解析时会自动转换成