学习自www.angular.cn网站
内置指令(Built-in directives)
它们可分为属性型指令或结构型指令。
属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 它们通常会作为HTML属性的名称而应用在元素上。
NgClass - 添加或移除一组CSS类NgStyle - 添加或移除一组CSS样式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这样的长属性路径中，它工作得很完美。