为什么 [myHighlight]="..." 对属性指令有效？

Question

dev guide 中的 myHighlight 属性指令使用 myHighlight 名称作为属性选择器：

selector: '[myHighlight]',

和一个输入属性:

@Input('myHighlight') highlightColor: string;

我发现odd/counterintuitive我们不必像这样指定选择器属性（尽管如果我们这样写，它仍然有效）：

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

相反，我们只需要指定输入属性，我们也神奇地得到了指令：

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

我不喜欢这种 "shortcut"/syntactic sugar/magic，因为看起来我们正在绑定到 [=22= 的 myHighlight 属性 ] 元素，而不是实际发生的事情：我们绑定到 myHighlight 属性指令的 myHighlight 属性。因此，仅通过查看 HTML，我们无法轻易确定 myHighlight 属性绑定到哪个 element/component/directive。

为什么会这样？

考虑这个 HTML 片段：

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

accessKey 是 HTML 元素属性还是具有输入属性的属性指令也命名为 accessKey？（仅供参考，accessKey 是一个有效的 HTML 元素属性，所以这个例子不是属性指令。）

回到突出显示指令...如果我将输入属性名称更改为 highlightColor:

@Input() highlightColor: string;

然后我必须指定属性选择器以及属性绑定，我发现它不那么模糊：

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

所以 "shortcut" 似乎只有在输入的属性名称与属性选择器匹配时才有效。

更新： 似乎 structural directives 使用相同的 trick/shortcut。例如，

<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

在 ng-conf 2016, I talked to Alex Rickabaugh, one of the Angular team members，关于我的担忧。他指出语法在其他方面也有歧义。例如，我们讨论了这个语法：

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

我们无法通过读取 HTML 来判断 whatIsThis 是否是具有同名输入属性的指令，或者 whatIsThis 是否是输入my-comp 组件的属性。

我想最重要的是，对于 Angular 2，我们不能简单地查看 HTML 来了解正在发生哪种绑定。我们必须了解应用程序使用的指令和组件。无赖。

为什么 [myHighlight]="..." 对属性指令有效？

Why does simply [myHighlight]="..." work for an attribute directive?

angular2-directives

angular