Question

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

selector: '[myHighlight]',

和输入属性：

@Input('myHighlight') highlightColor: string;

我觉得奇怪/违反直觉，我们不必像这样指定选择器属性（虽然如果我们这样写，它仍然可以工作）：

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

相反，我们只需要指定输入属性，我们也可以神奇地获取指令：

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

我不喜欢这个＆＃34;快捷方式＆＃34; / syntactic sugar / magic，因为它看起来像我们绑定到myHighlight的{{1}}属性元素，而不是实际发生的事情：我们重新绑定span属性指令的myHighlight属性。因此，仅通过查看HTML，我们就无法轻松确定myHighlight属性绑定到哪个元素/组件/指令。

为什么这样做？

考虑这个HTML片段：

myHighlight

<div [accessKey]="...">是否为HTML元素属性或属性指令，其输入属性也称为accessKey？（仅供参考，accessKey是有效的HTML元素属性，因此该示例不是属性指令。）

返回高亮指令...如果我将输入属性名称更改为accessKey：

highlightColor

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

@Input() highlightColor: string;

所以＆＃34;快捷方式＆＃34;只有在输入属性名称与属性选择器匹配时才会起作用。

更新：似乎structural directives使用相同的技巧/快捷方式。例如，

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

相当于

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

我不喜欢混合属性名称和选择器。

Answer 1

在ng-conf 2016，我与Angular team members之一的Alex Rickabaugh谈到了我的担忧。他指出语法在其他方面也不明确。例如，我们讨论了这种语法：

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

如果whatIsThis是具有相同名称的输入属性的指令，或者whatIsThis是my-comp的输入属性，我们无法通过阅读HTML来告知成分

我想底线是使用Angular 2，我们不能简单地查看HTML以了解发生了什么样的绑定。我们必须了解应用程序使用的指令和组件。长号。

为什么简单地[myHighlight] =＆＃34; ...＆＃34;为属性指令工作？

1 个答案: