为什么简单地[myHighlight]=“.”为属性指令工作？

Question

myHighlight属性指令在发展指南中使用myHighlight名称作为两个属性选择器：

selector: '[myHighlight]',

以及输入属性：

@Input('myHighlight') highlightColor: string;

我觉得奇怪/违反直觉的是，我们不需要像这样指定选择器属性(尽管我们这样写它，它仍然有效)：

<span myHighlight [myHighlight]="color">highlight me</span>

相反，我们只需指定输入属性，并且神奇地获得指令：

<span [myHighlight]="color">highlight me</span>

我不喜欢这个“快捷”/syntactic砂糖/魔术，因为它看起来像是绑定到span元素的myHighlight属性，而不是实际发生的事情:我们绑定到myHighlight属性指令的myHighlight属性。因此，仅通过查看HTML，我们就无法轻松地确定myHighlight属性绑定到哪个元素/组件/指令。

它为什么会这样工作？

考虑一下这个HTML片段：

<div [accessKey]="...">

accessKey是HTML属性还是带有输入属性(也称为accessKey )的属性指令？( accessKey是一个有效的HTML属性，因此这个示例不是属性指令。)

回到亮点指令..。如果我将输入属性名更改为highlightColor

@Input() highlightColor: string;

然后，我必须在属性绑定的同时指定属性选择器，我发现这一点不那么含糊：

<span myHighlight [highlightColor]="color">highlight me</span>

因此，只有当输入属性名称与属性选择器匹配时，“快捷方式”才能工作。

更新：似乎结构指令使用了相同的技巧/快捷方式。例如，

<p *ngIf="condition">
  text here
</p>

等于

<template [ngIf]="condition">  <--- binds input property ngIf to NgIf directive, not to template
  <p>
    text here
  </p>
</template>

我只是不喜欢把财产名称和选择器混在一起。

Answer 1

在吴2016年，我和有角队员之一Alex谈了我的担忧。他指出，语法在其他方面也是模糊的。例如，我们讨论了以下语法：

<my-comp [whatIsThis]="someProperty">

如果whatIsThis是一个具有相同名称的输入属性的指令，或者whatIsThis是my-comp组件的输入属性，我们就无法从读取HTML判断。

我想底线是，对于角2，我们不能简单地查看HTML来了解发生了什么样的绑定。我们必须了解应用程序使用的指令和组件。真扫兴。