Augular指令

通过添加和删除视图DOM元素来更改DOM布局 ----结构型指令

改变一个DOM元素的外观或行为 ----属性型指令

结构型指令

三个常用的内置结构型指令：NgIf、NgFor、NgSwitch

<div *ngIf="模板表达式">123</div>

<div *ngFor="let item of items">{{item.name}}</div>

“let item of items” 引号中的let item of items并不是模板表达式，而是Angular解释的一种小型语言

let item of items意思是将items数组中的每个条目存储到item中。并将其用于每次迭代的模板视图中

NgFor内置的变量

NgSwitch指令的用法与其它语言中switch case用法类似

NgSwitch NgSwitchCase NgSwitchDefault三个指令配合使用

ng-container并不是一个指令，是Angular中的一个分组元素，可以简单理解为一个Angular提供的标签。

他不会影响样式或DOM布局，当没有合适的宿主元素时，用户可以使用ng-container对元素进行分组。

常见的使用场景是，当需要便利或者是if判断时，它可以起到一个载体的作用

三个常用的内置属性型指令：NgClass NgStyle NgContent

利用该指令为元素动态的添加样式

支持三种不同的写法

<div [ngClass]="css1 css2 css3">This div is initially saveable, unchanged, and special.</div>

<div [ngClass]="['css1','css2','css3']">This div is initially saveable, unchanged, and special.</div>

<div [ngClass]="{'css1': true, 'css2': false, 'css3': true}">This div is initially saveable, unchanged, and special.</div>

当然也支持将这个对象定义在ts文件中，将NgClass指令绑定到该对象上，实现更多的动态操作

HTML自己提供的语法常见是

<div [class.css-name] = "true"></div>

相对于HTML提供的原生语法来说，NgClass指令的功能更加灵活

动态添加一组Style样式

用法：接收一个键值对的对象表达式

<div [ngStyle]="{font-size: 15px}">This div is initially saveable, unchanged, and special.</div>

指令的格式是，可以理解为动态内容的占位符

一个简单例子

子组件 add-button
<button (click) = 'add()'>
 <ng-content></ng-content>
</button>
父组件
<app-add-button>
 添加明细
</app-add-button>
最后展示的是一个“添加明细”的按钮

NgContent在创建可重用组件时内容简化了不少，避免了绑定输入属性这些步骤，只需要设置好，在实际重用该组件的时候往其中嵌入我们需要的文本即可

可以将其理解成为一个进阶版的input

而且动态文本只是其应用的一部分，我们可以往其中放入包括HTML标签，甚至于其他的组件

利用该指令操作通过ng-content投影进来的元素，类似于@ViewChild

注意子元素或指令的查询要在组件的AfterContentInit生命周期开始时才完成，所以需要在对应的生命周期函数中才能获取到要查询的元素

@Directive常见的元数据配置选项

元数据配置选项	说明
selector	对应的是HTML标签的属性名称
inputs	列举指令的一组可供数据绑定的输入属性
outputs	列举指令的一组可供事件绑定的输出属性
host	使用一组键值对，把类的属性映射到宿主元素的绑定属性和事件

指令将指定的行为附加到宿主元素上

所以Angular提供了两个操作宿主元素的对象