Angular 指令分为哪几种？

Question

在 Angular 中，指令是用于在 DOM 中创建、修改或删除元素的功能性扩展。Angular 的指令主要分为以下几种类型：

组件（Component）

• 尽管在严格意义上不被称为指令，但 Angular 的组件实际上是具有模板和样式的指令。组件用于创建用户界面中的可重用部分。
• 组件的核心特性包括： @Component 装饰器、模板、样式和业务逻辑。
• 示例：

@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
// 组件逻辑
}

结构型指令（Structural Directives）

• 这些指令用于改变 DOM 的结构，即添加、删除或重新排列元素。结构型指令通常以 * 前缀表示。
• 常见的结构型指令有：
• *ngIf : 根据条件渲染或移除元素。

<div *ngIf="isVisible">Visible Content</div>

• *ngFor : 根据数据集合渲染多个元素。

<ul>
 <li *ngFor="let item of items">{{ item }}</li>
</ul>

• *ngSwitch : 根据条件显示不同的模板。

<div [ngSwitch]="value">
 <div *ngSwitchCase="'A'">Case A</div>
 <div *ngSwitchCase="'B'">Case B</div>
 <div *ngSwitchDefault>Default Case</div>
</div>

属性型指令（Attribute Directives）

• 这些指令用于改变元素的外观或行为，它们通常不改变 DOM 结构，而是修改现有元素的属性或样式。
• 常见的属性型指令有：
• ngClass : 动态添加或移除 CSS 类。

<div [ngClass]="{'active': isActive, 'highlight': isHighlighted}">Content</div>

• ngStyle : 动态设置元素的样式。

<div [ngStyle]="{'color': color, 'font-size': fontSize}">Styled Content</div>

• 自定义属性型指令：用户定义的指令可以用于修改元素的行为或样式。

@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 @HostListener('mouseenter') onMouseEnter() {
   this.highlight('yellow');
 }
 @HostListener('mouseleave') onMouseLeave() {
   this.highlight(null);
 }
 constructor(private el: ElementRef) {}
 private highlight(color: string) {
   this.el.nativeElement.style.backgroundColor = color;
 }
}

通用型指令（Common Directives）

• Angular 提供了许多通用的指令，这些指令在大多数应用程序中非常有用。例如， ngFor 和 ngIf 都是 Angular 的内置指令，属于常用的指令集合。

指令是 Angular 的一个核心概念，它们使得模板和视图变得更加动态和灵活。通过理解和正确使用不同类型的指令，你可以在 Angular 应用程序中实现各种丰富的功能。