Angular的指令有哪些，具体如何使用

Angular 提供了多种指令，它们是 Angular 中用来扩展 HTML 的语法和行为的功能。Angular 中的指令主要分为三类：

• 组件指令（Component Directives）
• 结构型指令（Structural Directives）
• 属性型指令（Attribute Directives）
  接下来介绍这些指令及其用法：

1. 组件指令（Component Directives）

组件指令 是最常见的指令类型，实际上每一个 Angular 组件都是指令的一种。

• 使用方法：

@Component({
  selector: 'app-example', // 通过 selector 使用 <app-example></app-example>
  template: `<h1>Hello Angular</h1>`
})
export class ExampleComponent {}

• 使用示例：

<app-example></app-example>

这里 app-example 是一个自定义组件，它被认为是 Angular 的指令之一。

2. 结构型指令（Structural Directives）

结构型指令 是用来改变 DOM 结构的指令。常见的结构型指令包括 *ngIf、*ngFor 和 *ngSwitch。

• *ngIf：根据条件渲染元素。

<div *ngIf="condition">This will be displayed if condition is true</div>

• *ngFor：用于遍历数组，并在 DOM 中重复显示模板。

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

• *ngSwitch：根据表达式的值来选择不同的元素来显示。

<div [ngSwitch]="value">
  <p *ngSwitchCase="'A'">Value is A</p>
  <p *ngSwitchCase="'B'">Value is B</p>
  <p *ngSwitchDefault>Value is unknown</p>
</div>

3. 属性型指令（Attribute Directives）

属性型指令 用于改变元素或组件的外观或行为。常见的属性型指令包括 ngClass、ngStyle、[class] 和 [style]。

• ngClass：用于动态设置 CSS 类。

<div [ngClass]="{ 'active': isActive }">This is a box</div>

• ngStyle：动态设置内联样式。

<div [ngStyle]="{ 'color': isActive ? 'blue' : 'black' }">This text changes color</div>

• [class]：根据条件设置类名。

<div [class.active]="isActive">This div may have the 'active' class</div>

• [style]：根据条件动态设置样式。

<div [style.backgroundColor]="isActive ? 'green' : 'red'">Styled div</div>

自定义指令

除了 Angular 提供的内置指令，还可以创建自定义指令。例如，一个自定义的高亮指令：

创建自定义指令：

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

使用自定义指令：

<p appHighlight>This paragraph will be highlighted when hovered over.</p>

4. 常见用法总结

• 组件指令 用于创建自定义组件。
• 结构型指令 用于动态地改变 DOM 结构，例如 *ngIf、*ngFor、*ngSwitch。
• 属性型指令 用于动态改变元素的外观或行为，例如 ngClass 和 ngStyle。
  这些是 Angular 中最常见的指令及其用法。