简述什么是Augluar 指令（Directive）？

八股文_Angular面试题 0 223

参考回答

在 Angular 中，指令（Directive） 是一种用于操作 DOM 元素的核心功能。指令是带有特殊功能的类，可以通过它们来更改 HTML 元素的外观或行为。Angular 提供了三种类型的指令：

组件（Component）：
- 一种特殊的指令，带有模板，用于定义视图。
结构型指令（Structural Directive）：
- 用于添加、移除或更改 DOM 元素结构，例如 *ngIf、*ngFor。
属性型指令（Attribute Directive）：
- 用于改变元素的外观或行为，例如 ngClass、ngStyle。

指令是 Angular 应用的重要组成部分，它增强了 HTML 的功能。

详细讲解与拓展

1. 指令的分类

1.1 组件（Component）

组件是 Angular 中的一种特殊指令，它不仅可以控制 DOM，还可以管理视图和逻辑。

示例：

@Component({
  selector: 'app-root',
  template: '<h1>Hello Angular</h1>',
})
export class AppComponent {}

这里 AppComponent 是一个指令，但它带有模板，因此称为组件。

1.2 结构型指令（Structural Directive）

结构型指令通过操作 DOM 元素的结构来实现功能，比如添加或移除元素。

常见的结构型指令：
- *ngIf：条件渲染。
- *ngFor：循环遍历。
- *ngSwitch：条件分支。
示例：

<div *ngIf="isVisible">This is visible</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

自定义结构型指令：
创建一个自定义的结构型指令来显示或隐藏元素：

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
selector: '[appMyIf]',
})
export class MyIfDirective {
constructor(
  private templateRef: TemplateRef<any>,
  private viewContainer: ViewContainerRef
) {}

set appMyIf(condition: boolean) {
  if (condition) {
    this.viewContainer.createEmbeddedView(this.templateRef);
  } else {
    this.viewContainer.clear();
  }
}
}

使用：

<div *appMyIf="true">This will be displayed</div>

1.3 属性型指令（Attribute Directive）

属性型指令用于更改元素的外观或行为，而不会更改 DOM 结构。

常见的属性型指令：
- ngClass：动态设置 CSS 类。
- ngStyle：动态设置内联样式。
示例：

<div [ngClass]="{'highlight': isActive}">Dynamic Class</div>
<div [ngStyle]="{'color': isActive ? 'red' : 'blue'}">Dynamic Style</div>

自定义属性型指令：
创建一个自定义指令，用于高亮元素：

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.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
}

@HostListener('mouseleave') onMouseLeave() {
  this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
}
}

使用：

<p appHighlight>Hover over me!</p>

2. 指令的核心特点

选择器（Selector）：指令通过 selector 定义，用于标记应用到的元素。
生命周期钩子：
- 指令与组件一样拥有生命周期钩子（如 ngOnInit、ngOnDestroy）。
依赖注入：指令可以通过构造函数注入服务，例如操作 DOM 时注入 ElementRef 和 Renderer2。

3. 使用场景

结构型指令：动态添加、移除或修改 DOM 元素（如条件渲染、列表渲染）。
属性型指令：动态更改元素样式或行为（如高亮、动画）。
自定义指令：扩展 HTML 功能，封装复杂的交互逻辑。

总结

指令是 Angular 中增强 HTML 的重要工具，通过分类（组件、结构型指令、属性型指令）可以灵活地操作 DOM 和实现动态行为。在面试中，可以清晰描述指令的分类与用途，并通过代码示例展示自定义指令的实现，能够体现对指令的深入理解和实际应用能力。