Angular中的指令（Directives）详解

在Angular框架中，指令（Directives）是一种特殊的类，它与HTML元素相关联，可以修改元素的行为和外观。指令可以分为三种类型：组件（Components）、结构指令（Structural Directives）和属性指令（Attribute Directives）。本文将详细解释这些指令的概念和如何创建自定义指令。

什么是指令（Directives）？

指令用于为DOM元素添加行为。在jQuery时代，通常通过绑定事件（如mouseover、mouseleave、click）来操作DOM元素。而在Angular中，通过正确使用指令属性，无需手动绑定事件或进行复杂的操作来直接操作或隐藏DOM元素。Angular中的指令提供了一种简洁的方法来操作DOM元素。

组件是指令吗？

是的，所有的组件都是带有模板的指令，尽管它们看起来并不直接操作DOM元素，但组件的实现实际上利用了指令。组件可以看作是具有模板的指令。

属性指令（Attribute Directives）

属性指令用作元素的属性。可以将属性指令视为可以为标签定义的自定义属性。例如： <p colorMe>Yay! I’ll have some color</p> Angular提供了两个内置的属性指令：ngClass和ngStyle。将在本系列的第二部分讨论这些。

创建自定义属性指令

为了更好地理解属性指令，将编写一个自定义指令，为元素的文本应用颜色。首先，需要创建一个自定义指令。 import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[colorMe]' }) export class ColorDirective { constructor(private el: ElementRef) { el.nativeElement.style.color = 'red'; } } 创建自定义指令后，需要将该指令添加到标签中，并将该指令导入到app.module.ts（其中包含@NgModule）的声明部分。

修改模板以包含自定义指令

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `

` }) export class AppComponent { name: string; constructor() { this.name = `Angular! v${VERSION.full}`; } } 在app.module.ts中添加颜色指令后，就可以应用颜色到文本了。

结构指令（Structural Directives）

结构指令通过添加或移除元素来改变HTML的结构。与属性指令类似，结构指令也应用于元素的属性标签上。结构指令很容易识别，因为它们前面有一个星号(*)。例如： <p *ngIf=”visible”>some text</p> 常见的内置结构指令有NgIf、NgSwitch和NgFor。

创建自定义结构指令

为了创建结构指令，将编写一个自定义指令，它将只打印给定的“n”个项目中的偶数。 import { Directive, TemplateRef, Input, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[onlyEvens]' }) export class EvenDirective { constructor(private templateRef: TemplateRef, private viewContainerRef: ViewContainerRef) { } @Input() set onlyEvens(num: number) { if (num % 2 === 0) { this.viewContainerRef.createEmbeddedView(this.templateRef); } } } 指令的选择器是指令属性的名称，用方括号括起来。在案例中，需要在模板中用*onlyEvens装饰任何元素。

修改模板以包含自定义结构指令

import {Component, NgModule, VERSION} from '@angular/core'; @Component({ selector: 'my-app', template: `

` }) export class App { name: string; constructor() { this.name = `Angular! v${VERSION.full}`; } } 将使用ngFor循环遍历数字数组，并在ul循环内部使用结构指令*onlyEvens来根据指令中提到的条件渲染特定的li元素。结构指令前的星号(*)是必需的。