如何在 Angular 中构建自定义指令

作者
Tweet
Share
Share
Pin
0 Shares

Angular 指令详解与自定义指南

Angular 框架的一项核心功能就是指令。指令，简而言之，是向 DOM 元素赋予行为的方式。Angular 不仅提供了丰富的内置指令供我们使用，还允许我们在这个强大的框架中创建独一无二的自定义指令。

什么是指令？

指令是 Angular 用来修改 HTML 元素行为或外观的特殊代码片段。 它们可以用来添加事件监听器，更改 DOM 结构，或者控制元素的显示与隐藏。

Angular 中，内置指令主要分为两种：结构型指令和属性型指令。结构型指令负责改变 DOM 的结构，比如添加或删除元素；而属性型指令则侧重于修改元素的外观或行为。指令是扩展 Angular 组件功能的强大工具。

指令的优势

在 Angular 应用中使用指令，我们可以获得以下诸多好处：

  • 可复用性：指令可以在多个组件中重复使用，大大节省了开发时间和精力。
  • 可扩展性：通过扩展现有指令，我们可以添加新的功能，从而提升组件的性能。
  • 灵活性：指令允许我们以各种方式修改元素的行为或外观，在应用程序构建过程中提供了极大的灵活性。

搭建 Angular 开发环境

为了搭建 Angular 应用开发环境，首先需要安装 Angular CLI。在终端中运行以下命令：

 npm install -g @angular/cli

安装完成后，使用以下命令创建一个新的 Angular 项目：

 ng new custom-directives-app

这条命令将创建一个名为 “custom-directives-app” 的 Angular 项目。

创建自定义指令

现在，我们来创建自定义指令。首先，创建一个 TypeScript 文件，并定义一个被 @Directive 装饰器装饰的类。

@Directive 装饰器是用于创建自定义指令的 TypeScript 装饰器。在 src/app 目录中创建一个名为 highlight.directive.ts 的文件。在这个文件中，我们将创建自定义指令 HighlightDirective，用于高亮显示元素。

示例代码如下：

 import { Directive } from "@angular/core";
@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

上述代码从 @angular/core 模块引入了 Directive 装饰器。 @Directive 装饰器装饰了 HighlightDirective 类，并且它接受一个包含 selector 属性的对象作为参数。

在本例中，我们将 selector 属性设置为 [myHighlight]。这意味着，可以通过向 HTML 元素添加 myHighlight 属性来应用这个指令。

以下是如何在模板中使用这个指令的示例：

 <main>
<p myHighlight>Some text</p>
</main>

为指令添加行为

现在我们已经成功创建了一个指令。接下来，我们将向指令添加行为，使其能够操作 DOM。我们需要用到 @angular/core 模块中的 ElementRef。

我们会将 ElementRef 注入到指令的构造函数中。ElementRef 是视图中原生元素的包装器。

以下是向指令添加行为的示例：

 import { Directive, ElementRef } from "@angular/core";
@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor="lightblue";
    }
}

在这个例子中，HighlightDirective 类的构造函数接收一个 ElementRef 参数，Angular 会自动注入这个参数。ElementRef 提供了访问底层 DOM 元素的途径。

通过使用 this.element.nativeElement 属性，我们可以访问 element 参数的本机 DOM 元素。然后，我们可以使用 style 属性来设置组件的背景颜色为浅蓝色。这意味着，任何应用了 myHighlight 指令的元素都将具有浅蓝色的背景。

要使指令生效，请确保在 app.module.ts 文件中导入并声明它。

示例代码如下：

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，你就可以在 Angular 组件中的元素上应用 myHighlight 指令了。

 <main>
<p myHighlight>Some text</p>
</main>

运行开发服务器来测试指令是否生效。在终端中运行以下命令：

 ng serve

运行命令后，在 Web 浏览器中访问 http://localhost:4200/，你将看到如下所示的界面。

Angular 的内置指令可以接受值来改变元素的外观，但我们自定义的 myHighlight 指令目前还不具备这个功能。我们可以配置该指令使其接受一个值，用于动态设置模板的背景颜色。

为此，将 highlight.directive.ts 文件中的代码替换为：

 import { Directive, ElementRef, Input } from "@angular/core";
@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }
    constructor(private element: ElementRef) { 
    }
}

在上面的代码块中，HighlightDirective 类包含一个名为 myHighlight 的 setter 方法。该方法接收一个字符串类型的 color 参数。我们使用 @Input 装饰器来装饰这个 setter 方法，这样我们就可以将颜色值从父组件传递到指令中。

现在，你可以通过向 myHighlight 指令传递值来决定背景颜色。

例如：

 <main>
<p myHighlight="pink">Some text</p>
</main>

创建自定义结构型指令

在前面的章节中，我们学习了如何创建、添加行为以及将自定义属性型指令应用于模板。属性型指令主要用于修改 DOM 元素的外观，而结构型指令则用于添加、删除或移动 DOM 中的元素。

Angular 提供了两个常用的结构型指令：ngFor 和 ngIf。ngFor 指令用于渲染集合（数组）中的每个元素，而 ngIf 指令用于处理条件渲染。

本节中，我们将创建一个自定义结构型指令，它类似于 ngIf 指令。为此，请创建一个名为 condition.directive.ts 的文件。

在 condition.directive.ts 文件中，编写以下代码：

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
@Directive({
    selector: "[condition]"
})
export class ConditionDirective {
    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }
    constructor(
private template: TemplateRef<unknown>, 
private viewContainer: ViewContainerRef 
) {}
}

这段代码允许你通过将 condition 指令应用到元素并从父组件传递布尔值来有条件地渲染元素。

在 ConditionDirective 类的构造函数中，我们注入了 TemplateRef 和 ViewContainerRef 的实例。 TemplateRef 代表与指令关联的模板，而 ViewContainerRef 则代表应用视图的容器。

ConditionDirective 类的 setter 方法使用 if else 语句来检查 arg 参数。如果参数为 true，该指令会使用提供的模板创建嵌入式视图。 ViewContainerRef 类的 createEmbeddedView 方法在 DOM 中创建并渲染视图。

如果参数为 false，该指令会使用 ViewContainerRef 类的 clear 方法来清除视图容器。 这将从 DOM 中删除之前渲染的任何视图。

创建指令后，通过在 app.module.ts 文件中导入并声明它来将其注册到你的项目中。完成此操作后，你就可以开始在模板中使用该指令了。

以下是如何在模板中使用它的示例：

 <main>
<p *condition="true">Hello There!!!</p>
</main>

现在你可以创建自定义指令了

Angular 中的自定义指令提供了一种强大的方式来操作 DOM，并向模板添加动态行为。你已经学习了如何在 Angular 应用中创建和应用自定义的属性型和结构型指令。通过理解如何创建和使用自定义指令，你可以充分利用 Angular 的强大功能。