为什么简单的[myHighlight] ="..."适用于属性指令？

Question

dev指南中的myHighlightattribute指令使用名称作为属性选择器:myHighlight

selector: '[myHighlight]',

和输入属性:

@Input('myHighlight') highlightColor: string;

我觉得奇怪/违反直觉,我们不必像这样指定选择器属性(虽然如果我们这样写它,它仍然有效):

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

相反,我们只需要指定输入属性,我们也神奇地获取指令:

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

我不喜欢这个"快捷方式"/句法糖/魔术,因为它看起来像我们绑定到元素的myHighlight属性span,而不是实际发生的事情:我们绑定到属性指令myHighlight的myHighlight属性.因此,仅通过查看HTML,我们就无法轻易确定myHighlight属性绑定到哪个元素/组件/指令.

为什么这样工作？

考虑这个HTML片段:

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

是accessKeyHTML元素属性还是带有输入属性的属性指令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-conf 2016上，我与Angular 团队成员之一 Alex Rickabaugh 谈论了我的担忧。他指出该语法在其他方面也存在歧义。例如，我们讨论了这个语法：

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

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

我想最重要的是，对于 Angular 2，我们不能简单地查看 HTML 来了解正在发生什么类型的绑定。我们必须了解应用程序使用的指令和组件。真糟糕。