Angular 是一个流行的前端框架，它允许开发人员使用各种指令来扩展 HTML 元素和属性的功能。本文将介绍如何在 Angular 中自定义 HTML 标签和属性，以及如何编写自定义指令。
自定义 HTML 标签
我们很容易使用 Angular 内置的指令来操作标准的 HTML 元素。但有时候，我们需要在应用程序中使用自定义的 HTML 元素。为此，我们可以使用 Angular 的自定义元素（custom element）功能。
自定义元素是一种新的 HTML5 API，可以让我们使用未定义的 HTML 元素名称，例如 <hello-world>，然后在应用程序代码中定义它们的行为。
要使用自定义元素，我们需要在元素名称前加上“x-”。例如，如果要定义一个名为“hello-world”的自定义元素，我们可以这样写：
<x-hello-world></x-hello-world>
然后，在组件或指令中，我们可以使用 @Component 装饰器来定义这个元素的行为，例如这样：
@Component({
selector: 'x-hello-world',
template: '<p>Hello World!</p>'
})
export class HelloWorldComponent {}这样，当 Angular 编译器在应用程序中发现 <x-hello-world> 元素时，将会创建并显示 <p>Hello World!</p>。
自定义 HTML 属性
在 Angular 中，我们可以使用自定义指令来扩展 HTML 元素的功能。自定义指令是一个带有 'selector' 和 'template' 属性的类，这些属性定义了一个新的指令。下面的例子定义了一个名为 'highlight' 的指令：
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------------
--------- -------------
--
------ ----- ------------------ -
--------------- ----------- -
-------------------------------------- - ---------
-
-在上面的例子中，我们使用了 @Directive 装饰器来定义一个名为 'highlight' 的指令，并使用 ElementRef 获取了指令所应用的 HTML 元素的引用，然后将其背景色设置为黄色。
要在 HTML 中使用这个指令，我们只需要将它添加到元素上，如下所示：
<p highlight>Hi there</p>
当 Angular 编译器遇到这个元素时，它将创建一个 HighlightDirective 实例，并将该实例附加到 'p' 元素的 DOM 元素上，从而使其背景色变成黄色。
更高级的自定义指令
自定义指令可以更加高级，例如传递输入值、引用其他指令等。
传递输入值
要将输入值传递给自定义指令，我们可以在指令的类中使用 @Input 装饰器。例如，以下指令将文本转换为大写：
-- -------------------- ---- -------
------ - ---------- ------ ---------- - ---- ----------------
------------
--------- ---------------
--
------ ----- -------------------- -
--------------------- ----- -------
--------------- ----------- -
---------------------------- - ------------------------
-
-在这个指令中，我们使用 @Input 装饰器来表示 text 输入值，并在 constructor 中将其转换为大写。在 HTML 中使用这个指令时，我们需要将文本内容绑定到 toUpperCase 属性上，如下所示：
<p toUpperCase="Hello, world!"></p>
引用其他指令
在 Angular 中，我们可以在指令内部引用其他指令，以扩展它们的功能。为了实现这一点，我们可以在指令的构造函数中使用 @Host 装饰器来注入所需的指令。例如，以下指令将 <p> 元素的背景色设置为黄色，并在鼠标悬停时将其改为红色：
-- -------------------- ---- -------
------ - ---------- ------------- ----------- - ---- ----------------
------------
--------- -------------
--
------ ----- ------------------ -
------------------------------------- ---------------- -------
------------- -
-------------------- - ---------
-
--------------------------- -------------- -
-------------------- - ------
-
--------------------------- -------------- -
-------------------- - ---------
-
-在这个指令中，我们使用了 @HostBinding 装饰器来绑定 <p> 元素的 backgroundColor 样式属性，将其设置为黄色。然后，我们使用 @HostListener 装饰器监听 mouseenter 和 mouseleave 事件，并在事件发生时改变背景颜色。
在 HTML 中使用这个指令时，我们只需要将其添加到元素上，如下所示：
<p highlight>Hi there</p>
总结
在 Angular 中，我们可以使用自定义元素和自定义指令来扩展 HTML 元素和属性的功能。自定义元素允许我们定义未定义的 HTML 标签名称，而自定义指令允许我们扩展标准 HTML 标签的行为。自定义指令可以更加高级，例如传递输入值、引用其他指令等。希望本文对你理解 Angular 指令有所帮助。
示例代码
完整的示例代码可以在以下链接中找到：
https://stackblitz.com/github/xiaomingplus/ng-custom-attribute-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0999d83d39b48814e5ec9