Angular 带选择器的结构指令，格式为“；元素[属性]”；_Angular_Angular Directive

Angular 带选择器的结构指令，格式为“；元素[属性]”；

angular

Angular 带选择器的结构指令，格式为“；元素[属性]”；,angular,angular-directive,Angular,Angular Directive,我试图创建一个只对特定HTML元素（div）可用的角度结构指令但是，当我尝试将结构指令选择器设置为div[nameOfDirective]时，出现了一个错误：“无法绑定到'nameOfDirective'，因为它不是'div'的已知属性。” 如果选择器仅是属性[nameOfDirective]，则它可以正常工作我创建了一个plunker来模拟错误：由于发生编译错误，plunker将不会预览。打开控制台查看它。如果更改文件restricted element.directive.ts中的指

我试图创建一个只对特定HTML元素（div）可用的角度结构指令

但是，当我尝试将结构指令选择器设置为

div[nameOfDirective]

时，出现了一个错误：“无法绑定到'nameOfDirective'，因为它不是'div'的已知属性。”

如果选择器仅是属性

[nameOfDirective]

，则它可以正常工作

我创建了一个plunker来模拟错误：
由于发生编译错误，plunker将不会预览。打开控制台查看它。
如果更改文件

restricted element.directive.ts

中的指令选择器，它将正常预览

我是做错了什么还是一个bug

错误在html中。在这种情况下，指令必须如下声明：


限制元素指令

您可以在中了解更多关于此的信息

我通过编辑来解释如何正确使用该指令

在详细阅读angular文档后，我可以看出您试图做的是一个错误，因为如果您使用*的语法，您告诉angular您正在声明一个结构指令，这就是angular总是将您的元素转换为下面所示内容的原因：

在这里，我们使用结构指令ngIf：

{{hero.name}

Angular将始终将属性转换为一个元素，包裹在主体元素周围，如下所示*ngIf


{{hero.name}

尽管angular文档中没有任何地方说不能对特定DOM元素使用structural指令中的选择器，但它也绝对没有说可以使用它

但是如果你说一个结构指令做了以下转换：

*ngIf指令移动到它成为属性绑定的元素，[ngIf]
元素的其余部分（包括其class属性）在元素内部移动

这就是控制台显示的错误发生的地方，因为选择器指示network指令只能在div中，Angular已经操纵了该指令并将其放入ng模板中

声明时：

@Directive({
  selector: 'div[red]'
})

指令仅限于div，如果在html中告诉Angular将其用作结构化指令：


限制元素指令

在内部，角度转换为：

<ng-template red [red]="'fasf'" [redData]="'0909'">
  <div>Restricted Element Directive</div>
</ng-template>


限制元素指令

这会导致错误，因为您的指令对div元素有限制。这里的文档对此进行了更为概括和明确的解释

因此，您的代码不会导致错误：

您应该使用属性指令
或删除div限制

错误在html中。在这种情况下，指令必须声明如下：


限制元素指令