使用自定义指令
介绍
大家好，在本指南中，我们将学习自定义指令。在 Angular 中，指令起着重要作用。有许多内置指令，如ngClass、ngStyle等。但今天我们要制作自己的指令，即自定义指令。
您可能会发现自己处于需要自定义指令的情况。这些情况可能是任何情况，从需要更改日期格式到检查电子邮件格式。阅读本指南后，您将永远不会在尝试执行此类任务时遇到困难。
使用 CLI 创建自定义指令
您可以在不使用 CLI 的情况下创建指令。但是您需要做一些额外的工作，而使用 CLI 创建指令可以避免这些工作。您可以使用多个命令来使用 CLI 创建指令。
ng g d demo --skipTests=true
或者
ng generate directive --skipTests=true
在上面的命令中，我使用了--skipTests=true，因为 Angular 会创建一个用于编写单元测试的测试文件。我们现在不打算编写任何测试用例，所以我跳过了这一点。
深入探究@Directive 装饰器
现在您已成功创建一个名为demo.directive.ts的指令。在此文件中，您可以看到类似以下代码片段的结构。
import { Directive } from '@angular/core';
@Directive({
selector: '[appDemo]'
})
export class DemoDirective {
constructor() { }
}
这里 Angular 添加了@Directive，它是从@angular/core本身导入的，用于标识这是一个指令。这里你可以看到一个选择器属性，它写在方括号（ [ ] ）下面。这意味着我们可以将它添加到标签中：
<div appDemo></div>
如果要将其用作className，可以将选择器从 '[appDemo]' 更改为 '.appDemo'。进行此更改后，您可以像这样使用它：
<div class="appDemo"></div>
使用 ElementRef 访问元素
现在您知道了如何创建自定义指令以及如何在标签中使用它。现在我将解释如何在指令中使用该标签。
因此，这里有一个新类，它将帮助您提供对元素的引用。类名是ElementRef，它是从@angular/core导入的。这将为您提供该元素的引用，并且无论您执行什么动态更改，它都会反映在该元素上。
此代码片段将帮助您使用ElementRef来改变元素的文本颜色。
演示.指令.ts
import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
selector: '[appDemo]'
})
export class DemoDirective implements OnInit {
constructor(private element: ElementRef) { }
ngOnInit() {
this.element.nativeElement.style.color = 'red'
}
}
在上面的代码中，我在构造函数中获取了元素的引用。ElementRef也是一个包装类；我们需要使用nativeElement对元素执行更改。
现在它只不过是一段 JavaScript。如果你熟悉 DOM 操作，那么此时你可以利用你的 DOM 操作经验。
在 JavaScript 中，我们还需要通过类、标签或 ID 名称获取元素引用。
应用程序.组件.html
<div appDemo>Custom Directive Demo</div>
输出：
您可以看到输出与我们预期的完全相同。
如果您还想使用事件侦听器，请使用@HostListener。它的工作方式与 JavaScript 中的addEventListener类似。如果您熟悉addEventListener，那么理解它会花费更少的时间。
import { Directive, ElementRef, OnInit, HostListener } from '@angular/core';
@Directive({
selector: '[appDemo]'
})
export class DemoDirective implements OnInit {
constructor(private element: ElementRef) { }
ngOnInit() {
this.element.nativeElement.style.color = 'red'
}
@HostListener('click') onClick() {
console.log("this item is being clicked")
}
}
在上面的代码中，你可以看到我添加了一个点击函数。在点击我们添加了自己的指令的app.component.html的 div 元素后，它将在控制台上显示一个文本。
输出：
this item is being clicked demo.directive.ts:15
您可以看到输出文本已填充在控制台上。
结论
现在您已经是项目中使用自定义指令的专家了。那就继续吧，如果您想了解有关指令的更多信息，请阅读此处。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~