跳至正文
首页 » 博客 » How to create custom Attribute Directive in Angular

How to create custom Attribute Directive in Angular

属性指令用于更改用户输入或通过来自服务的数据的元素的行为，外观或外观。本质上，Angular 2中有三种类型的指令:

  1. 组件
  2. 结构指令
  3. 属性指令

在这篇文章中，我们将学习如何在Angular中创建属性指令。因此，假设我们想要更改元素的背景颜色; 在这种情况下，我们将属性指令应用于元素。

创建第一个属性指令

让我们从创建属性指令开始。为此，我们需要创建一个类，并使用 @ directive装饰器对其进行装饰。可以创建一个简单的属性指令来改变元素的颜色，如下所示:

从 “@ angular/core ”导入 { Directive，ElementRef，Renderer}； @ 指令 ({选择器 '[chcolor]'})导出类ChangeColorDirective { 构造函数 (private el: ElementRef， private render: Renderer) {这个.红色 (changecolor)；} private changecolor(color: string) { 这个 .render.setElementStyle( this .el.nativeElement, 'color', color);}}

当我们创建一个属性指令来改变元素的颜色时，请记住，我们不需要创建一个新的属性指令来改变颜色; 简单的颜色可以通过使用属性绑定来改变。但是，在这个例子中，我们创建的属性指令将改变元素的颜色。有几个要点要记住:

  1. 导入所需的模块，如指令，ElementRef和渲染器从角核心库
  2. 创建TypeScript类
  3. 装饰类与 @ 指令
  4. 在 @ decorator函数中设置selector属性的值。将使用该指令，使用元素上的选择器值。
  5. 在类的构造函数中，注入ElementRef和Renderer对象。

我们在指令的构造函数中注入ElementRef来访问DOM元素。我们还在指令的构造函数中注入渲染器，以使用DOM的元素样式。我们正在调用渲染器的setElementStyle函数。在函数中，我们通过使用ElementRef的对象并设置当前元素的颜色样式属性来传递当前DOM元素。我们可以通过AppComponent中的选择器使用这个属性指令，如下所示:

@ 组件 ({'app-container' 选择器，template: '<p chcolor >{{ message }}</p>'})导出AppComponent类 {

我们在一个

元素。它会将段落文本的颜色更改为红色。此外，我们需要在app.Module.ts中声明属性指令，如下所示:

  1. 我们需要导入指令
  2. 我们需要声明指令

应用程序.模块.ts

从 './task/taskcolor.directive' 导入 { ChangeColorDirective}； 从 “./app.Routing ”导入 { app_routing}；从 “./shared/data.Service ”导入 { DataService}； @ NgModule({导入: [BrowserModule，FormsModule，HttpModule，app_routing]，声明: [AppComponent，TasksComponent，HomeComponent，AddtaskComponent，ChangeColorDirective]，提供商: [DataService]，引导: [AppComponent]})导出AppModule类 { }

在这里，我们导入ChageColorDirective并在app.Module中声明它。完成此操作后，我们应该能够在所有组件中使用属性指令。

用户输入属性指令

我们可能需要在一些用户输入的基础上应用属性指令，以在用户将鼠标悬停在元素上或将鼠标悬停在元素上时更改元素的颜色。要做到这一点，我们需要:

  1. 捕获用户输入或操作，以及
  2. 分别应用颜色或透明颜色。

在各种用户操作上，我们可以调用不同的方法来处理用户操作。为了使方法能够处理用户操作 (如鼠标输入)，我们需要使用 @ HostListener装饰器来装饰方法。我们可以修改指令来处理用户输入，如下面的清单所示。

从 ‘@ angular/core’ 

import { Directive，ElementRef，Renderer，HostListener，Input}； @ 指令 ({选择器 '[chcolor]'})导出类ChangeColorDirective {构造函数 (private el: ElementRef， private render: Renderer) { } @ HostListener( 'mouseenter') methodToHandleMouseEnterAction() {这个.红色 (changecolor)；}@ HostListener( 'mouseleave') methodToHandleMouseExitAction() {这个.蓝色 (changecolor)；}private changecolor(color: string) { 这个 .render.setElementStyle( 此 .el.nativeElement， 'color' ，color)；}}

正如您可能知道的，我们添加了两个方法来处理用户操作。在鼠标进入和鼠标离开时，我们分别将颜色更改为红色和蓝色。

传递数据到指令与绑定

到目前为止，我们已经将颜色的值硬编码到指令中。在下一节中，让我们通过绑定将数据传递给指令。要将指令与数据绑定，我们将使用 @ Input() 装饰器并在指令类中添加一个属性:

@ Input( 'chcolor') highlightColor: string;

attribute指令可以按如下方式使用:

< p [chcolor] = "color" {{ 消息 }} </ p >

让我们重写属性指令以从绑定中获取数据。属性指令将绑定到的元素将传递颜色数据。如果元素未将颜色数据绑定到属性绑定，则将使用默认颜色red。

可以重新创建该指令，如下面的清单所示:

从 ‘@ angular/core’ 

import { Directive，ElementRef，Renderer，HostListener，Input}； @ 指令 ({选择器 '[chcolor]'})导出类ChangeColorDirective {private _defaulcolor = “红色 ”；@ Input( 'chcolor') highlightColor: string; 构造函数 (private el: ElementRef， private render: Renderer) { } @ HostListener( 'mouseenter') methodToHandleMouseEnterAction() { console.log( 此 .highlightColor)；这个 .changecolor( 此 .highlightColor | | 此 ._Defaulcolor)；}@ HostListener( 'mouseleave') methodToHandleMouseExitAction() {console.log( 此 .highlightColor)；这个 .changecolor( null );} private changecolor(color: string) {这个 .render.setElementStyle( this .el.nativeElement, 'color', color);}}

我们可以通过绑定到属性指令来传递数据，如下所示:

@ Component({选择器: 'app-container'，模板:'< div >< 输入类型 = "单选" 名称 = "颜色" (单击) = "color = 'blue'" 蓝色 >< 输入类型 = "单选" 名称 = "颜色" (单击) = "color = 'orange'" 橙色 >< 输入类型 = "单选" 名称 = "颜色" (单击) = "color = 'green'" 绿色 ></div>< p [chcolor] = "color" {{ 消息 </ p >'})导出类AppComponent {

我们正在创建一个单选按钮，并将按钮的click事件上的颜色值绑定到属性指令。我们可以从单选按钮中选择一种颜色，然后在鼠标上输入颜色将更改为选定的值。

在实际应用中，我们可以从REST服务获取数据并绑定到属性指令。

结论

在这篇文章中，我们学习了Angular中的属性指令，并创建了它们来更改元素的行为或外观，并将其绑定到元素的数据。我希望你觉得这篇文章有用。感谢您的阅读!

</p

标签: