7

开发指南中的myHighlight属性指令使用名称作为属性选择器：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>

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

4

1 回答 1

4

在ng-conf 2016上，我与Angular 团队成员之一 Alex Rickabaugh 谈到了我的担忧。他指出，语法在其他方面也是模棱两可的。例如，我们讨论了这种语法：

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

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

我想底线是使用 Angular 2，我们不能简单地查看 HTML 来了解正在发生的绑定类型。我们必须了解应用程序使用的指令和组件。真可惜。

于 2016-05-18T14:15:23.927 回答