angular内置指令相关知识

大纲

1、angular指令的分类
2、angular指令之——组件
3、angular指令之——属性指令 （ngStyle、ngClass）
4、angular指令——结构指令（ngIf、ngFor、ngSwitch、NgTemplateOutlet、NgPlural、NgPluralCase）

angular指令的分类

Angular 2 的指令分为以下三种：
组件(Component directive)：用于构建UI组件，继承于 Directive 类
属性指令(Attribute directive): 用于改变组件的外观或行为
结构指令(Structural directive): 用于动态添加或删除DOM元素来改变DOM布局

angular指令分类

angular指令之——组件

组件本质上其实就是一个指令，用于构建UI,因此常可以用一些指令来构建一些经常会用到的页面构件或者通过指令来编辑页面。

angular指令之——属性指令

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

<!--绑定常量-->
<div [ngStyle]="{'background-color': 'green'}"></div>
<!--绑定表达式 -->
<div [ngStyle]="{'background-color': person.country === 'UK' ? 'green' : 'red'}"></div>

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

<!--绑定常量 -->
<div [ngClass]="{'text-success': true }"></div>
<!--绑定表达式 -->
<div [ngClass]="{'text-success': person.country === 'CN'}"></div>

angular指令——结构指令

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

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

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

<div *ngFor="let person of people">{{person.name}}</div>
<!--
    在一些包含复杂项目的列表中，每次更改会引起很多相互关联的DOM操作，
这里使用NgFor指令会让性能变差。在服务器上重新拉取数据时，
拉取的数据可能包含很多之前显示过的数据，
但Angular并不知道哪些列表数据在数据更新前已经显示过，哪些没有显示过，
只能清除旧列表的DOM元素，并用新的列表数据填充DOM元素来重建一个新列表。
这个情况下可以用追踪函数来避免这种重复渲染。
<ul>
    <li *ngFor="let fruit of fruitsList,let i=index">{{fruit}}</li>
</ul>
-->
<script>
//追踪函数
trackByFruits(index:number,fruit:Fruit){
    return fruit.id;
}
</script>
<ul>
  <li *ngFor="let fruit of fruitsList,trackBy:trackByFruits">{{fruit}}</li>
</ul>

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>

4.NgTemplateOutlet

<!--
    NgTemplateOutlet指令可以在模板中中创建内嵌视图。
使用NgTemplateOutlet，需要为指令绑定一个队模板元素的引用。
也就是说，使用NgTemplateOutlet指令时，需要在组件中声明一个模板元素的引用，
并将这一变量绑定给指令作为输入属性。
NgTemplateOutlet指定的基本用法：
-->
<template [ngTemplateOutlet]="templateRefExpression"><template>
<!--
    除此之外，还可以为被插入的内嵌视图绑定一个上下文对象。
NgTemplateOutlet指令有一个ngOutletContext属性，
通过给ngOutletContext属性绑定输入变量，
可以将当前模板中获取的上下文对象绑定到被插入的内嵌视图中。
-->
<template [ngTemplateOutlet]="templateRefExpression" 
ngOutletContext="objectExpression"><template>

5.NgPlural、NgPluralCase

<!--
    NgPlural、NgPluralCase是一组搭配使用的指令。
NgPlural是一个国际化指令，其作用和NgSwitch指令类似，
可以看作是NgSwitch指令的一种变种，NgPluralCase指令可以类比NgSwitchCase类理解。
Ngplural与NgSwitch的指令差异体现在：使用NgPlural指令需要继承NgLocalization类并
实现getPluralCategory()方法，在这一方法中，根据具体的分类需求，
将落在某一个范围的值命名的一个分类，并将分类名称返回，而返回的分类，
可以个[ngPlural]绑定值进行匹配，当值属于这一分类的定义范围时，就当匹配成功。
所以，NgSwitch指令只能进行精确匹配，而NgPlural指令除了进行精确匹配外，
还可以进行范围匹配。
-->
<script>
import {Component} from '@angular/core';
@Component({
  selector: 'ng-plural',
  template: `
    <p>{{value}}</p>
    <button (click)="inc()">增加</button>
    <div [ngPlural]="value">
      <template ngPluralCase="=0">0</template>
      <template ngPluralCase="=1">1</template>
      <template ngPluralCase="other">其他</template>
    </div>
  `
})
export class NgPluralExample {
  value: any= 'init';
  inc() {
    this.value = this.value === 'init' ? 0 : this.value + 1;
  }
}
</script>

代码网址

angular的实例教程中的angular-directive

参考网址

指令
angular内置指令