Angular2指令语法知识点汇总

学习自www.angular.cn网站

内置指令(Built-in directives)

它们可分为属性型指令或结构型指令。

属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 它们通常会作为HTML属性的名称而应用在元素上。

1. NgClass - 添加或移除一组CSS类
2. NgStyle - 添加或移除一组CSS样式
3. NgModel - 双向绑定到HTML表单元素

NgClass
我们经常用动态添加或删除 CSS 类的方式来控制元素如何显示。 通过绑定到NgClass，可以同时添加或移除多个类。

CSS 类绑定 是添加或删除单个类的最佳途径。

[class.className]="true | false"

把ngClass绑定到一个 key:value 形式的控制对象。这个对象中的每个 key 都是一个 CSS 类名，如果它的 value 是true，这个类就会被加上，否则就会被移除。

currentClasses: {};
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

把NgClass属性绑定到currentClasses，根据它来设置此元素的CSS类：

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

NgStyle
我们可以根据组件的状态动态设置内联样式。 NgStyle绑定可以同时设置多个内联样式。
样式绑定是设置单一样式值的简单方式。

NgModel - 使用[(ngModel)]双向绑定到表单元素（原生HTML元素，例如像<input>和<select>这样的 HTML 元素上使用双向数据绑定）
当开发数据输入表单时，我们通常都要既显示数据属性又根据用户的更改去修改那个属性。

内置结构型指令
结构型指令的职责是HTML布局。 它们塑造或重塑DOM的结构，这通常是通过添加、移除和操纵它们所附加到的宿主元素来实现的。

NgIf - 根据条件把一个元素添加到DOM中或从DOM移除
NgFor - 对列表中的每个条目重复套用一个模板
NgSwitch - 一组指令，用于切换一组视图

NgIf
通过把NgIf指令应用到元素上（称为宿主元素），我们可以往DOM中添加或从DOM中移除这个元素。

我们也可以通过类绑定或样式绑定来显示或隐藏一个元素。
但隐藏子树和用NgIf排除子树是截然不同的。
当隐藏子树时，它仍然留在DOM中。子树中的组件及其状态仍然保留着。即使对于不可见属性，Angular也会继续检查变更。子树可能占用相当可观的内存和运算资源。
当NgIf为false时，Angular从DOM中物理地移除了这个元素子树。 它销毁了子树中的组件及其状态，也潜在释放了可观的资源，最终让用户体验到更好的性能。
显示/隐藏的技术对于只有少量子元素的元素是很好用的，但要当心别试图隐藏大型组件树。相比之下，NgIf则是个更安全的选择。

防范空指针错误
ngIf指令通常会用来防范空指针错误。

模板输入变量

带索引的*ngFor
NgFor指令上下文中的index属性返回一个从零开始的索引，表示当前条目在迭代中的顺序。 我们可以通过模板输入变量捕获这个index值，并把它用在模板中。
<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div> （hero和i都叫做模板输入变量）

带trackBy的*ngFor
*ngFor with trackBy
ngFor指令有时候会性能较差，特别是在大型列表中。 对一个条目的一丁点改动、移除或添加，都会导致级联的DOM操作。
如果给它指定一个trackBy，Angular就可以避免这种折腾。我们往组件中添加一个方法，它会返回NgFor应该追踪的值。
在微语法中，把trackBy设置为该方法。

NgSwitch指令
NgSwitch指令类似于JavaScript的switch语句。 它可以从多个可能的元素中根据switch条件来显示某一个。 Angular只会把选中的元素放进DOM中。
NgSwitch实际上包括三个相互协作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault。
这组指令在原生元素和Web Component上都可以正常工作。

模板引用变量 ( #var )
模板引用变量通常用来引用模板中的某个DOM元素，它还可以引用Angular组件或指令或Web Component。
我们可以在模板中的任何地方引用模板引用变量。
关于模板引用变量的提醒
模板引用变量(#phone)和*ngFor部分看到过的模板输入变量(let phone)是不同的。
模板引用变量的作用范围是整个模板。 不要在同一个模板中多次定义同一个变量名，否则它在运行期间的值是无法确定的。
我们也可以用ref-前缀代替#。

输入输出属性(@Input和@Output)
我们要重点突出下绑定目标和绑定源的区别。
绑定的目标是在=左侧的部分， 源则是在=右侧的部分。
绑定的目标是绑定符：[]、()或[()]中的属性或事件名， 源则是引号 (" ") 中的部分或插值符号 ({{}}) 中的部分。
源指令中的每个成员都会自动在绑定中可用。 不需要特别做什么，就能在模板表达式或语句中访问指令的成员。
访问目标指令中的成员则受到限制。 只能绑定到那些显式标记为输入或输出的属性。

声明输入和输出属性
目标属性必须被显式的标记为输入或输出。
组件内部标记：
@Input()  hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();

另外，还可以在指令元数据的inputs或outputs数组中标记出这些成员。
@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})

既可以通过装饰器，也可以通过元数据数组来指定输入/输出属性。但别同时用！

输入属性通常接收数据值。 输出属性暴露事件生产者，输入和输出这两个词是从目标指令的角度来说的。

给输入/输出属性起别名
有时需要让输入/输出属性的公开名字不同于内部名字。

模板表达式操作符
模板表达式语言使用了JavaScript语法的子集，并补充了几个用于特定场景的特殊操作符。 下面介绍其中的两个：管道和安全导航操作符。

管道操作符 ( | )
在绑定之前，表达式的结果可能需要一些转换。例如，可能希望把数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。

Angular管道对像这样的小型转换来说是个明智的选择。管道是一个简单的函数，它接受一个输入值，并返回转换结果。它们很容易用于模板表达式中，只要使用管道操作符 (|) 就行了。
管道操作符会把它左侧的表达式结果传给它右侧的管道函数。

安全导航操作符 ( ?. ) 和空属性路径
Angular的安全导航操作符(?.)是一种流畅而便利的方式，用来保护出现在属性路径中null和undefined值。保护视图渲染器，让它免于失败。


假设模板表达式涉及属性路径，在下例中，显示一个空 (null) 英雄的firstName。
The null hero's name is {{nullHero.name}}
JavaScript 抛出了空引用错误Angular也是如此：
TypeError: Cannot read property 'name' of null in [null].
整个视图都不见了。
可以通过用NgIf代码环绕它来解决这个问题。
<!--No hero, div not displayed, no error -->
<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>

或者可以尝试通过&&来把属性路径的各部分串起来，让它在遇到第一个空值的时候，就返回空。
The null hero's name is {{nullHero && nullHero.name}}

Angular 安全导航操作符 (?.) 是在属性路径中保护空值的更加流畅、便利的方式。
<!-- No hero, no problem! -->
The null hero's name is {{nullHero?.name}}
在像a?.b?.c?.d这样的长属性路径中，它工作得很完美。