使用 CLI 生成自定义指令

2019-12-05 08:00:00 · 飞浪

自定义指令允许我们仅通过提供自定义属性并处理它来改变元素的行为或外观。

介绍

在本指南中，我们将了解什么是自定义指令、如何创建自定义指令以及在 Angular 中在哪里使用此类自定义指令。更重要的是，我们将通过两个示例从头开始创建和实现自定义指令来学习它。

Angular 中的自定义指令

在开始构建自定义指令之前，我们应该了解它是什么以及为什么我们应该在 Angular 应用程序中使用指令。

当我们使用 CLI 创建应用程序时，我们可以有一个根组件，称为应用组件。它本身也是一个指令，是整个应用程序的基本构建块。

Angular 支持三种不同类型的指令：

组件指令
结构指令
属性指令

正如我们前面所讨论的，组件本身就是一个组件指令，因此结构指令用于添加、更新或有条件地渲染不同的 DOM 元素，最后是属性指令。它也被称为自定义指令，它允许我们将指令用作元素的属性并执行特定操作。

自定义指令或属性指令负责修改 HTML 元素的外观或行为，就像我们使用属性以及任何元素的属性一样。

默认情况下，在 Angular 中支持两种类型的内置属性指令：

NgStyle：此属性指令用于修改不同 DOM 元素的外观或行为。它将样式直接应用于原生元素，例如字体、字体样式、颜色、边框、高度、宽度等。
NgClass：此属性指令用于通过提供类名和属性名来修改或将类属性应用于本机 DOM 元素。

到目前为止，我们已经了解了自定义指令以及属性指令的类型。现在我们还可以根据业务需求创建自定义指令，让我们来创建它。

使用 Angular CLI 创建自定义指令

自定义指令不过是属性指令，它允许我们仅通过提供自定义属性并处理它来改变元素的行为或外观。

为了实现这一点，我们需要创建一个单独的指令来获取完整的元素，并且我们可以根据我们的要求对其进行处理或修改。

要创建自定义指令，我们可以使用 Angular CLI。我们需要执行的命令如下所示。

      Ng generate directive <directive_name>

例如，我们可以这样通过提供指令名称来创建指令。

      Ng generate directive mydirective

示例 1

现在让我们看一个简单的例子，我们将创建一个自定义指令，使用我们新生成的自定义指令来改变标签控件的字体颜色。

为此，我们需要使用以下命令来创建指令。

      Ng generate directive highlight

创建指令后，我们需要将其导入模块文件。为此，打开app.module.ts，源代码将如下所示。：

      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

// Importing the custom directive
import { HighlightDirective } from './highlight.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HighlightDirective ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
    

其中高亮的是我们的指令名称，执行上述命令后，会创建新的文件，代码如下：

突出显示.指令.ts

      import { Directive } from '@angular/core';

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

export class HighlightDirective {
  constructor() { }
}
    

正如我们在上面的例子中看到的，该文件包含关键字@Directive() ，它使用选择器appHighlight声明指令，我们可以将其用到模板中来改变元素的行为。

可能会出现如何从指令访问元素的问题。好吧，为此，我们可以使用ElementRef，它允许我们直接从模板访问元素，就像这样：

      constructor(elementr: ElementRef) {  
  // can use elementr here to access the element properties
}
    

现在让我们使用自定义指令更改标签元素的字体颜色。在此之前，打开文件app.component.html并粘贴以下代码行：

      <div>
    <label appHighlight>This is label element</label>
</div>
    

请注意，我们已将appHighlight与 label 元素一起用作属性。这意味着我们使用了访问当前元素的自定义属性，并且通过使用ElementRef，我们可以修改其行为。

让我们跳转到我们新创建的名为highlight.directive.ts的指令并替换以下源代码。

      import { Directive, ElementRef } from "@angular/core";

@Directive({
  selector: "[appHighlight]"
})

export class HighlightDirective {

  constructor(private el: ElementRef) {
    // To change label's font color
    el.nativeElement.style.color = "red";
  }

}
    

通过使用此指令，我们可以更改标签的字体颜色。为此，我们使用ElementRef访问了原生元素，因此现在我们可以修改其样式，就像我们使用自定义值修改元素的颜色一样。

当我们运行此示例时，标签控件的字体颜色将根据我们的要求变为红色。

同样的，我们也可以用不同的值修改同一个元素的不同属性，就像这样：

      export class HighlightDirective {
    
  constructor(private el: ElementRef) {
    // To change label's font color and other properties
    el.nativeElement.style.color = "red";
    el.nativeElement.style.fontWeight = "bolder";
    el.nativeElement.style.border = "2px double black";
  }
    
}
    

这只是一个简单的示例，展示了如何使用自定义指令访问原生元素以及如何直接从自定义属性修改元素的样式。您可以自行尝试此示例并观察您获得的变化。

示例 2

到目前为止，我们已经了解了如何使用 Angular CLI 创建指令，并查看了一个访问和修改元素样式的简单示例。

现在让我们跳到一个更复杂的例子，我们将实现接受输入值的指令，并且根据输入值的长度，我们将直接从自定义指令更改输入框的背景颜色。

在深入研究示例之前，我们需要创建一个新的自定义指令。我们可以使用以下命令来实现。

      Ng generate directive passwordlengthdetector

到目前为止，我们已经创建了自定义指令，现在在使用该指令之前，我们需要像这样将其导入到模块文件中。

      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PasswordlengthdetectorDirective } from './passwordlengthdetector.directive'

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, PasswordlengthdetectorDirective ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
    

使用上述命令创建指令后，我们可以看到新创建的文件，如下所示：

密码长度检测器.指令.ts

      import { Directive } from '@angular/core';

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

export class PasswordlengthdetectorDirective {
  constructor() { }

}
    

到目前为止，我们的自定义组件的基本配置已经完成。现在我们的要求是从父组件获取输入值并将其传递给指令进行进一步处理。为此，让我们跳转到 app.component.html ，代码将如下所示。：

      <table>
    <tr>
       <td>
         <label>Please enter your password :-</label>
       </td>
       <td>
         <input type="text" appPasswordlengthdetector />
       </td>
    </tr>
</table>
    

在此文件中，我们有简单的输入控件，但需要注意的一点是，我们还使用了一个名为appPasswordlengthdetector的附加属性，这是我们的自定义指令名称。通过这种方式，我们允许元素将其值传递给指令本身。

让我们修改我们的自定义指令，以便它可以根据我们的要求改变现有元素的行为。

appPasswordlengthdetector.directive.ts

      import {
  Directive,
  ElementRef,
  OnChanges,
  HostListener
} from "@angular/core";

@Directive({
  selector: "[appPasswordlengthdetector]"
})

export class PasswordlengthdetectorDirective implements OnChanges {

  constructor(private el: ElementRef) {
    console.log(el.nativeElement.value);
  }

  // Listen for keyup event and change background color
  @HostListener("window:keyup") ngOnChanges(event) {

    let count = this.el.nativeElement.value.length
    console.log(this.el.nativeElement.value.length);
    if(count < 5) {
        this.el.nativeElement.style.backgroundColor = 'red'
    } else if(count >= 5 && count <= 10) {
        this.el.nativeElement.style.backgroundColor = 'green'
    } else if(count > 10) {
        this.el.nativeElement.style.backgroundColor = 'purple'
    }

  }

}
    

让我们逐步分解代码以便理解。

第一步是使用 ElementRef，以便我们可以从模板访问当前元素。
然后我们使用了<fo

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 CLI 生成自定义指令

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; // Importing the custom directive import { HighlightDirective } from './highlight.directive'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HighlightDirective ], bootstrap: [ AppComponent ] }) export class AppModule { }

import { Directive, ElementRef } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { constructor(private el: ElementRef) { // To change label's font color el.nativeElement.style.color = "red"; } }

export class HighlightDirective { constructor(private el: ElementRef) { // To change label's font color and other properties el.nativeElement.style.color = "red"; el.nativeElement.style.fontWeight = "bolder"; el.nativeElement.style.border = "2px double black"; } }

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { PasswordlengthdetectorDirective } from './passwordlengthdetector.directive' @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, PasswordlengthdetectorDirective ], bootstrap: [ AppComponent ] }) export class AppModule { }

<table> <tr> <td> <label>Please enter your password :-</label> </td> <td> <input type="text" appPasswordlengthdetector /> </td> </tr> </table>

import { Directive, ElementRef, OnChanges, HostListener } from "@angular/core"; @Directive({ selector: "[appPasswordlengthdetector]" }) export class PasswordlengthdetectorDirective implements OnChanges { constructor(private el: ElementRef) { console.log(el.nativeElement.value); } // Listen for keyup event and change background color @HostListener("window:keyup") ngOnChanges(event) { let count = this.el.nativeElement.value.length console.log(this.el.nativeElement.value.length); if(count < 5) { this.el.nativeElement.style.backgroundColor = 'red' } else if(count >= 5 && count <= 10) { this.el.nativeElement.style.backgroundColor = 'green' } else if(count > 10) { this.el.nativeElement.style.backgroundColor = 'purple' } } }