分类
组件：带有模版的指令
属性型指令：更改元素、组件或其他指令的外观或行为的指令。
结构型指令：通过添加和删除 DOM 元素来更改 DOM 布局的指令
内置属性型指令
- ngClass
- ngStyle
- ngModel：NgModel 指令适用于 ControlValueAccessor 支持的元素。Angular 为所有基本 HTML 表单元素提供了值访问器。
内置结构型指令
每个元素只能应用一个结构型指令。
- *ngFor
trackBy: 如果没有 trackBy 则，每次 angular 都会重新渲染列表中的所有元素；如果有了 trackBy，则只会重新渲染 trackBy 跟踪的属性变化的元素。用于性能优化
- *ngIf
ngIf 为假值时，则 Angular 将从 DOM 中移除一个元素及其后代。然后，Angular 会销毁其组件，从而释放内存和资源。
-
ngSwitch
NgSwitch 是一组指令（共三个）：NgSwitch 会根据切换条件显示几个可能的元素中的一个。
NgSwitch —— 一个属性型指令，它更改其伴生指令的行为。
NgSwitchCase —— 结构型指令，当其绑定值等于开关值时将其元素添加到 DOM 中，而在其不等于开关值时将其绑定值移除。
NgSwitchDefault —— 结构型指令，当没有选中的 NgSwitchCase 时，将其宿主元素添加到 DOM 中。
编写一个属性型指令
- 基本的属性型指令
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[appHighlight]"
})
export class HighlightDirective {
// 在指令的 constructor() 中添加 ElementRef 以注入对宿主 DOM 元素的引用，该元素就是 appHighlight 的作用目标。
constructor(el: ElementRef) {
// ElementRef 的 nativeElement 属性会提供对宿主 DOM 元素的直接访问权限。
el.nativeElement.style.backgroundColor = "yellow";
}
}
- 使用
<h3 appHighlight>高亮</h3>
- 事件监听 @HostListener
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({
selector: "[appHighlight]"
})
export class HighlightDirective {
@HostListener("mouseenter") onMouseEnter() {
this.highlight("yellow");
}
@HostListener("mouseleave") onMouseLeave() {
this.highlight("");
}
public el: ElementRef;
constructor(el: ElementRef) {
this.el = el;
}
public highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
- 设置输入属性
import { Directive, ElementRef, HostListener, Input } from "@angular/core";
@Directive({
selector: "[appHighlight]"
})
export class HighlightDirective {
@HostListener("mouseenter") onMouseEnter() {
this.highlight("yellow");
}
@HostListener("mouseleave") onMouseLeave() {
this.highlight("");
}
@Input() defaultColor = "";
public el: ElementRef;
constructor(el: ElementRef) {
this.el = el;
}
public highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
<h3 appHighlight defaultColor="red">英语练习题库</h3>
通过 NgNonBindable 停用 Angular 处理过程
要防止在浏览器中进行表达式求值，请将 ngNonBindable 添加到宿主元素。ngNonBindable 会停用模板中的插值、指令和绑定。
在下面的示例中，表达式 {{ 1 + 1 }} 的渲染方式会和在代码编辑器的一样，而不会显示 2。
<p>Use ngNonBindable to stop evaluation.</p>
<p ngNonBindable>This should not evaluate: {{ 1 + 1 }}</p>
将 ngNonBindable 应用于元素将停止对该元素的子元素的绑定。但是，ngNonBindable 仍然允许指令在应用 ngNonBindable 的元素上工作。
如果将 ngNonBindable 应用于父元素，则 Angular 会禁用该元素的子元素的任何插值和绑定，例如属性绑定或事件绑定。
编写结构型指令
import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
@Directive({
selector: "[appUnless]"
})
export class UnlessDirective {
@Input() set appUnless(condition: boolean) {
if (!condition && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
public hasView = false;
// UnlessDirective 会通过 Angular 生成的 <ng-template> 创建一个嵌入的视图
// 然后将该视图插入到该指令的原始 <p> 宿主元素紧后面的视图容器中。
// TemplateRef可帮助你获取 <ng-template> 的内容，而 ViewContainerRef 可以访问视图容器。
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {}
}
使用
<p *appUnless="condition" class="unless a">
(A) This paragraph is displayed because the condition is false.
</p>
<ng-template [appUnless]="condition">
<p class="unless a">
(A) This paragraph is displayed because the condition is false.
</p>
</ng-template>
结构型指令（例如 _ngIf）上的星号 _ 语法是 Angular 解释为较长形式的简写形式。 Angular 将结构型指令前面的星号转换为围绕宿主元素及其后代的 <ng-template>。
用 <ng-template> 创建模板片段
Angular 的 <ng-template> 元素定义了一个默认情况下不渲染任何内容的模板。使用 <ng-template> ，你可以手动渲染内容，以完全控制内容的显示方式。
如果没有结构型指令，并且将某些元素包装在 <ng-template> 中，则这些元素会消失。
