结构型指令
结构型指令通过添加、移除或替换 DOM 元素的方式来改变 DOM 的结构。Angular 提供了三个内置的结构型指令：*ngIf、*ngFor 和 *ngSwitch。
1. *ngIf
*ngIf 用于根据条件添加或移除 DOM 元素。
<div *ngIf="isVisible">This is visible</div>
2. *ngFor
*ngFor 用于循环遍历集合，并为每个元素生成相应的 DOM 元素。
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
3. *ngSwitch
*ngSwitch 用于基于表达式的值切换多个元素之间的显示。
<div [ngSwitch]="condition">
<div *ngSwitchCase="'case1'">Case 1 content</div>
<div *ngSwitchCase="'case2'">Case 2 content</div>
<div *ngSwitchDefault>Default content</div>
</div>
属性型指令
属性型指令通过修改或添加 DOM 元素的属性来改变元素的外观或行为。Angular 提供了一些内置的属性型指令，比如 ngModel、ngClass、ngStyle。
1. ngModel
ngModel 用于在表单元素上实现双向数据绑定。
<input [(ngModel)]="name" />
2. ngClass
ngClass 用于根据条件动态添加或移除 CSS 类。
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Some content</div>
3. ngStyle
ngStyle 用于根据条件动态设置元素的内联样式。
<div [ngStyle]="{'font-size.px': fontSize, 'color': fontColor}">Styled content</div>
自定义指令
除了内置的指令外，Angular 还允许开发者创建自定义指令。自定义指令可以用来满足特定应用程序的需求，比如添加特定的行为或样式。
// 自定义指令
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
@Directive({
selector: '[appCustomDirective]'
})
export class CustomDirective {
@Input() appCustomDirective: string;
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngOnInit() {
this.renderer.setStyle(this.el.nativeElement, 'color', this.appCustomDirective);
}
}
<!-- 使用自定义指令 -->
<div appCustomDirective="blue">Custom Directive Example</div>
以上是一些关于 Angular 指令的基本概念。指令是 Angular 中一个强大的特性，可以用来扩展模板的功能，实现更灵活和可复用的代码。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4929/Angular