Angular中的指令是什么？

封面图 • 2025-11-14 • Angular

在 **Angular** 中，**指令（Directives）** 是一种特殊的类，用于**操作 DOM 元素**、**创建可重用的组件**或**修改现有元素的行为**。Angular 提供了三种类型的指令：

---

## 一、指令的类型

### 1. **组件（Component）**
- **组件**是 Angular 中最常用的指令类型。
- 它是一个带有模板的指令，用于构建用户界面。
- 每个组件都是一个指令，但每个指令不一定是组件。

✅ 示例：
```ts
@Component({
  selector: 'app-hello',
  template: `<h1>Hello, Angular!</h1>`
})
export class HelloComponent { }
```

---

### 2. **属性指令（Attribute Directives）**
- 用于**修改 DOM 元素的外观或行为**。
- 通常通过 `@HostBinding` 或 `@HostListener` 来操作 DOM 属性或事件。
- 常见的例子：`ngClass`, `ngStyle`, 自定义高亮指令等。

✅ 示例：自定义高亮指令
```ts
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
}
```
使用方式：
```html
<p appHighlight>这段文字会被高亮</p>
```

---

### 3. **结构指令（Structural Directives）**
- 用于**改变 DOM 的结构**（添加、移除、替换元素）。
- 最常见的结构指令是 `*ngIf`, `*ngFor`, `*ngSwitch`。
- 结构指令以 `*` 开头，Angular 会自动处理它们的语法糖。

✅ 示例：自定义结构指令
```ts
@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}
}
```
使用方式：
```html
<p *appUnless="false">这段内容会被显示</p>
```

---

## 二、指令的核心功能

- **操作 DOM**：通过 `ElementRef` 访问 DOM 元素。
- **监听事件**：通过 `@HostListener` 监听元素上的事件。
- **绑定属性**：通过 `@Input()` 和 `@Output()` 实现数据绑定。
- **动态创建组件/视图**：使用 `ViewContainerRef` 动态加载组件或模板。

---

## 三、指令的生命周期钩子

指令也可以使用 Angular 的生命周期钩子，例如：

- `ngOnInit`
- `ngOnChanges`
- `ngOnDestroy`

✅ 示例：
```ts
@Directive({ selector: '[appMyDir]' })
export class MyDirective implements OnInit {
  ngOnInit() {
    console.log('指令初始化');
  }
}
```

---

## 四、总结

| 类型 | 用途 | 示例 |
|------|------|------|
| 组件 | 构建 UI 界面 | `@Component` |
| 属性指令 | 修改元素样式或行为 | `@Directive` + `@HostBinding` |
| 结构指令 | 改变 DOM 结构 | `@Directive` + `ViewContainerRef` |

---

如果你有具体的使用场景或想了解某个指令的实现方式，欢迎继续提问！