Angular 指令是 Angular 框架中的一项核心功能，它允许开发人员扩展 HTML 的功能，并创建可复用的组件和行为。以下是一些常见的 Angular 指令：
- 组件指令 (Component Directives)
组件指令是最常用的一种指令，用于创建可复用的 UI 组件。每个组件指令都关联一个模板，用于定义组件的视图。
示例：
typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: '<h1>Hello, World!</h1>',
})
export class HelloWorldComponent {}
- 属性指令 (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');
}
}
- 结构指令 (Structural Directives)
结构指令用于改变 DOM 布局，通常添加或移除 DOM 元素。常见的结构指令有 ngIf、ngFor 等。
示例：
html
<div ngIf="isVisible">This will be displayed if isVisible is true.</div>
<ul>
<li ngFor="let item of items">{{ item }}</li>
</ul>
- 内置指令 (Built-in Directives)
Angular 提供了许多内置指令，以简化常见的任务。
ngIf
根据表达式的真假值来添加或移除元素。
html
<div ngIf="condition">Content goes here...</div>
ngFor
根据集合的内容重复渲染模板。
html
<ul>
<li ngFor="let item of items">{{ item }}</li>
</ul>
ngClass
动态添加或移除 CSS 类。
html
<div [ngClass]="{ 'active': isActive }">Content goes here...</div>
ngStyle
动态设置元素的样式。
html
<div [ngStyle]="{ 'color': isRed ? 'red' : 'blue' }">Content goes here...</div>
自定义指令 (Custom Directives)
开发者可以创建自定义指令来扩展 Angular 的功能。
创建自定义指令的步骤：
-
使用 @Directive 装饰器定义指令。
-
在指令类中实现所需的逻辑。
-
在模块中声明指令。
示例：
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
<div appHighlight>Highlight me!</div>
<button appToggleClass>Toggle Class</button>
总结
Angular 指令通过扩展 HTML 的能力，使开发者能够创建更加动态和交互的 web 应用程序。了解和掌握不同类型的指令，对于构建强大的 Angular 应用至关重要。