前言
Angular 框架提供了许多强大的指令来帮助我们更有效地开发，但是有时候我们需要定制一些特殊的行为或者展示，这时候自定义指令就派上用场了。TypeScript 则能够大大提高我们代码的可读性、可维护性和类型安全性。本文将介绍如何在 Angular 中使用 TypeScript 来编写自定义指令。
创建指令
在 Angular 中创建指令非常简单，只需要使用 @Directive 装饰器即可。下面是一个最基本的例子：
import { Directive } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {}我们先导入了 Directive 类，然后使用它来装饰我们的类。@Directive 装饰器有一个参数 selector，代表着指令的选择器。在这个例子中，我们使用 '[myDirective]' 来定义这个指令适用于所有带有 myDirective 属性的元素。这个选择器的写法和 CSS 选择器非常相似。
给指令添加行为
指令能做的事情并不仅限于改变元素的样式或者显示内容，我们还可以通过它来提供各种不同的行为。下面是一个例子，我们会在元素上添加一个点击事件：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
---------------------- -----------
-------------- ----------- -
---------------- ------- -- --- ---------- --------------
-
-我们使用了 @HostListener 装饰器来监听元素上的 click 事件，然后调用了 onClick() 方法来处理事件。由于 event.target 可能会被推断为一个非空值，我们使用 ! 运算符来给 TypeScript 一个暗示，告诉它这个值不会为空。
除了 @HostListener，Angular 还提供了一些其他的属性装饰器，比如 @HostBinding 和 @Input，它们能让我们更加方便地对元素进行属性设置和传递参数。
总结
本文介绍了如何在 Angular 中使用 TypeScript 编写自定义指令，包括指令的创建和添加行为。使用 TypeScript 能够让我们的代码更加清晰易懂，并且大大减少了潜在的错误和Bug。如果你正在开发一个复杂的应用程序，那么 TypeScript 绝对是你不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64717ade968c7c53b0f5811c