angular – 为什么简单的[myHighlight] =“…”适用于属性指令？

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

selector: '[myHighlight]',

和输入属性：

@Input('myHighlight') highlightColor: string;

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

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

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

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

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

为什么这样工作？

考虑这个HTML片段：

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

accessKey是一个HTML元素属性还是带有一个名为accessKey的输入属性的属性指令？ (仅供参考,accessKey是一个有效的HTML元素属性,因此该示例不是属性指令.)

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

@Input() highlightColor: string;

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

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

因此,如果输入属性名称与属性选择器匹配,则“快捷方式”似乎仅起作用.

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

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

相当于

<template [ngIf]="condition">  <--- binds input property ngIf to NgIf directive,not to template
  <p>
    text here
  </p>
</template>

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

在 ng-conf 2016,我和 Angular team members之一的Alex Rickabaugh谈到了我的担忧.他指出语法在其他方面也含糊不清.例如,我们讨论了这种语法：

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

如果whatIsThis是具有相同名称的输入属性的指令,或者whatIsThis是my-comp组件的输入属性,我们无法通过阅读HTML来判断.

我想底线是Angular 2,我们不能简单地看一下HTML来了解发生了什么样的绑定.我们必须了解应用程序使用的指令和组件.游民.

猜你在找的Angularjs相关文章