在 Angular 中使用 HTML 标记作为指令

Posted 2023-05-07

【中文标题】在 Angular 中使用 HTML 标记作为指令

【英文标题】：Using an HTML Tag for a Directive in Angular

【发布时间】：2018-12-01 00:27:21

【问题描述】：

在 Angular (2+) 中，通常会使用 html 标签将组件添加到模板中，并使用 HTML 属性添加指令：在这两种情况下，这都是通过 @Component/@Directive 装饰器中的选择器参数实现的：

<!-- component set up using-- selector: 'my-component' -->
<my-component></my-component>
<!-- directive set up using-- selector: '[myDirective]' -->
<div myDirective></div>

我测试了我是否可以设置一个使用 HTML 标签而不是属性的指令，它似乎工作正常：

<!-- directive set up using-- selector: 'my-tag-directive' -->
<my-tag-directive></my-tag-directive>

我想知道这是否在 Angular 中得到官方支持。

【问题讨论】：

注意：我们目前使用的是 Angular 2，所以我对此进行了测试，尽管目的是升级。

说“似乎工作正常”是指您没有收到任何错误或 Directive 工作正常中的某些逻辑？

ya angular 5 已弃用

@Buczkowski 我设置了它，将其添加到我的模板中，并将 alert('hello') 添加到 ngOnInit，并且没有产生任何错误。

@ChellappanV 你有链接吗？ ***.com/a/50972583/2661556 中提供的链接似乎表明它是允许的。

【参考方案1】：

是的，它也可以是标签，请参阅此文档了解更多信息

https://angular.io/api/core/Directive#selector

【讨论】：

但它可以是“虚构”标签吗？从您提供的链接（以及我发现的其他链接）来看，它看起来不像。它们只是绑定到现有的、完善的标签，而不是“新”标签。例如，我觉得您可以为组件标签执行此操作，但不能完全生成一个新标签。

之前的编辑：没关系，我已经实际测试过这个并且可以确认这个工作。