自定义[Angular]属性指令

2 年 ago

韵, 科

2 minutes

起初

据本家表示，Angular有三个指令。以下是摘录内容。

Angular 指令概览
Angular 中有三种指令类型：
1. 组件 – 带有模板的指令。
2. 结构性指令 – 通过添加和移除 DOM 元素来改变 DOM 布局。
3. 属性指令 – 改变元素、组件或其他指令的外观或行为。

三种指令中，组件是最常见的。你在快速入门指南中第一次看到了组件。
结构性指令改变视图的结构。NgFor 和 NgIf 是两个例子。在结构性指令指南中学习它们。
属性指令用作元素的属性。例如，在模板语法指南中内置的 NgStyle 指令可以同时改变多个元素的样式。

分別對應到三個指令，即「元件指令」、「結構指令」和「屬性指令」，並且在上述中提到元件也是指令之一。還有，剩下的兩個指令，即「結構指令」和「屬性指令」，都具有以下特點。

ビューの構造を変更する

ngIf や ngFor のように DOM の追加や削除を行うことで DOM のレイアウトを変更する

属性ディレクティブ

要素の属性として扱われる

NgStyle のように DOM 要素の変更を行うことで見た目などを変更する

成为事实。

在本文中，我們將展示一個簡單的例子，探討”自製屬性指令”的概念。

提供最新消息

2021年1月9日

記事内で扱ったコードを Angular v11.0.5 で確認しました

工作环境

環境バージョン備考Angular CLI~~v6.0.0~~ v11.0.5$ ng --versionAngular~~v6.0.0~~ v11.0.5同上TypeScriptv4.0.2同上Node.js~~v9.2.1~~ v12.18.3$ node --versionnpm~~v6.1.0~~ v6.14.6$ npm --version

ng version 的结果$ ng version

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | ‘_ \ / _` | | | | |/ _` | ‘__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 11.0.5
Node: 12.18.3
OS: darwin x64

Angular: 11.0.5
… 动画, 命令行界面, 常用, 编译器, 编译器CLI, 核心, 表单
… 浏览器平台, 浏览器动态, 路由器
Ivy 工作区: 是

包版本
———————————————————
@angular-devkit/architect 0.1100.5
@angular-devkit/build-angular 0.1100.5
@angular-devkit/core 11.0.5
@angular-devkit/schematics 11.0.5
@schematics/angular 11.0.5
@schematics/update 0.1100.5
rxjs 6.6.0
typescript 4.0.2

生成指令

使用Angular CLI生成指令。

$ ng g directive directive/template
  create src/app/directive/template.directive.spec.ts
  create src/app/directive/template.directive.ts
  update src/app/app.module.ts

本文讨论的构成

本文中展示了包含之前生成的指令的构造。

src/
  `-app/
    `-component/
    |  `-use-directive/
    |   `- use-directive.component.css
    |   `- use-directive.component.html
    |   `- use-directive.component.ts
    `-directive/
    |  `- template.directive.ts
    `- app.component.css
    `- app.component.html
    `- app.component.ts
    `- app.module.ts

这次的架构内容如下。

自作ディレクティブである template.directive の利用方法を確認するためのコンポーネント
テンプレート HTML の中で template.directive を扱う

template.directive

自作ディレクティブ
use-directive.component から利用され､要素の属性として扱われる

app.component

ルートコンポーネント
use-directive.component を子コンポーネントとして扱う

app.module

ルートモジュール
本構成であつかうコンポーネントやモジュールを管理する

现在我们来实际实施指令的内容，并探讨如何处理它。

属性指令的实现

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appTemplate]'
})
export class TemplateDirective implements OnInit {

  /**
   * 親コンポーネントから受け取るデータ-1
   *
   * @type {string}
   * @memberof TemplateDirective
   */
  @Input() public greet: string = '';

  /**
   * 親コンポーネントから受け取るデータ-2
   *
   * @type {string}
   * @memberof TemplateDirective
   */
  @Input() public name: string = '';

  /**
   * コンストラクタ
   *
   * @param {ElementRef} elementRef このディレクティブがセットされたDOMへの参照
   * @memberof TemplateDirective
   */
  constructor(
    private elementRef: ElementRef
  ) {
  }

  /**
   * 初期処理
   * 本ディレクティブではこのタイミングで親コンポーネントから受け取ったデータを
   * DOMの innerHTML にセットする
   *
   * @memberof TemplateDirective
   */
  public ngOnInit() {
    const element = this.elementRef.nativeElement;
    element.innerHTML = this.greet + ' ' + this.name + '.';
  }
}

请按照以下顺序逐一查看要点。

使用装饰器Directive来声明指令信息

要创建指令，需要声明Directive装饰器。
因此，首先要导入Directive模块，如下所示。
（实际上，在使用之前通过先前提到的命令生成指令时会自动导入）

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

宣言将通过以下代码进行。

@Directive({
  selector: '[appTemplate]'
})

以下的程式碼。

このディレクティブが selector パラメータに指定された属性として扱われる

从使用者的角度来看，在这个意义上

selector パラメータに指定された値を要素の属性にセットすることで､このディレクティブを適用できる

这句话的意思是什么？

使用装饰器修饰的属性从接收数据的一方接收数据。

指令可以被定义为”带参数的指令”。
如果要接收属性值作为参数，可以使用 @Input 装饰器。
实际代码如下。

@Input() public greet: string;
@Input() public name: string;

请参考这里，关于装饰器的内容。

使用ElementRef获取元素对象并进行使用。

在获取要素对象的模块中，有一个元素引用（ElementRef）。
通过使用它，可以“获取到设置了该指令的 DOM 元素”，从而轻松实现作为属性指令的元素修改。

当我们实际查看代码时，我们会在以下代码中进行 ElementRef 的导入。

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

通过在构造函数中进行依赖注入，使ElementRef可用。

  constructor(
    private elementRef: ElementRef
  ) {
  }

最后，使用 nativeElement 取得 DOM 元素，并进行元素的修改。

public ngOnInit() {
  const element = this.elementRef.nativeElement;
  element.innerHTML = this.greet + ' ' + this.name + '.';
}

根据上述代码，可以通过 nativeElement 获取元素，该元素通常是普通的 DOM 元素本身，因此可以通过 innerHTML 等方式简单地访问和修改元素。

注册指令

为了使用创建的属性指令，在app.module.ts中注册。
实际上，当使用上述命令生成指令时，它会自动注册，因此需要确认其内容。

// 前略...
import { TemplateDirective } from './directive/template.directive';
// 中略...
@NgModule({
  declarations: [
    // 中略...
    TemplateDirective,
  ],
  // 中略...
})
export class AppModule { }

通过将生成的指令导入并设置到declarations中，就可以注册指令。这样一来，整个应用程序都可以使用该指令了。

使用组件中的指令

在组件的模板中，可以通过将指令指定为元素的属性来使用。具体的代码示例如下所示。

<!-- ディレクティブを指定してパラメータをセットする例 -->
<div appTemplate [greet]="'Hello'" [name]="'Angular'"></div>

使用div元素的属性appTemplate创建的指令，这个指令可以使组件用于代码中。

在这个例子中，template.directive.ts 准备了两个通过 @Input 装饰器修饰的属性作为外部传入的属性值的参数。
在使用这些被 @Input 修饰的属性时，组件需要在调用 template.directive.ts 时调用它们。

[greet]="'Hello'" [name]="'Angular'"

设置了两个属性。

在这个例子中，greet和name直接设置了字符串，但也可以使用属性绑定将组件中定义的变量设置进去。

所以，此代码的执行结果如下。

执行结果。

当使用 use-directive.component.html 文件来调用 template.directive.ts 时，可以确认通过设置值为”Hello”和”Angular”的方式，DOM元素在template.directive.ts中经过变更后得以显示。

源代码

在本篇文章中使用的代码已在此处上传，请供参考。

请提供以下内容的一个中文本地化版本:

参考：

本家の Attribute Directives