Angular 指令

Angular 指令是 Angular 框架中的一项核心功能，它允许开发人员扩展 HTML 的功能，并创建可复用的组件和行为。以下是一些常见的 Angular 指令：

 1. 组件指令 (Component Directives)
组件指令是最常用的一种指令，用于创建可复用的 UI 组件。每个组件指令都关联一个模板，用于定义组件的视图。

示例：
typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: '

Hello, World!

',
})
export class HelloWorldComponent {}

 2. 属性指令 (Attribute Directives)
属性指令用于改变 DOM 元素的外观或行为。常见的属性指令有 ngClass、ngStyle 等。

示例：
typescript
import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

 3. 结构指令 (Structural Directives)
结构指令用于改变 DOM 布局，通常添加或移除 DOM 元素。常见的结构指令有 ngIf、ngFor 等。

示例：
html

This will be displayed if isVisible is true.

 
• {{ item }}

 4. 内置指令 (Built-in Directives)
Angular 提供了许多内置指令，以简化常见的任务。

 ngIf
根据表达式的真假值来添加或移除元素。
html

Content goes here...

 ngFor
根据集合的内容重复渲染模板。
html

 
• {{ item }}

 ngClass
动态添加或移除 CSS 类。
html

Content goes here...

 ngStyle
动态设置元素的样式。
html

Content goes here...

 自定义指令 (Custom Directives)
开发者可以创建自定义指令来扩展 Angular 的功能。

 创建自定义指令的步骤：
1. 使用 @Directive 装饰器定义指令。
2. 在指令类中实现所需的逻辑。
3. 在模块中声明指令。

示例：
typescript
import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appToggleClass]'
})
export class ToggleClassDirective {
  private isToggled: boolean = false;

  constructor(private el: ElementRef) {}

  @HostListener('click') onClick() {
    this.isToggled = !this.isToggled;
    this.el.nativeElement.classList.toggle('toggled', this.isToggled);
  }
}

 使用指令
将指令添加到组件模板中以实现其功能。

示例：
html

Highlight me!

Toggle Class

 总结
Angular 指令通过扩展 HTML 的能力，使开发者能够创建更加动态和交互的 web 应用程序。了解和掌握不同类型的指令，对于构建强大的 Angular 应用至关重要。