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

Question

selector: '[myHighlight]',

@Input('myHighlight') highlightColor: string;

我觉得奇怪/违反直觉的是，我们不必像这样指定选择器属性（尽管如果我们这样写，它仍然有效）：

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

相反，我们只需要指定input属性，就可以神奇地得到指令：

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

我不喜欢这个“快捷方式”/语法糖/魔法，因为它看起来像是绑定到span元素的myhlight属性，而不是实际发生的事情：我们绑定到myhlight属性指令的myhlight属性。因此，仅仅通过查看HTML，我们不能很容易地确定MyHighlight属性绑定到哪个元素/组件/指令。

<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

在NG-CONF2016上，我和Alex Rickabaugh谈了我的担忧，Alex Rickabaugh是棱角团队的成员之一。他指出，语法在其他方面也是模棱两可的。例如，我们讨论了以下语法：

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

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

我想底线是，在Angular 2中，我们不能简单地通过查看HTML来理解发生了什么样的绑定。我们必须了解应用程序使用的指令和组件。倒霉。