为什么简单地[myHighlight] ="..."?为属性指令工作? [英] Why does simply [myHighlight]="..." work for an attribute directive?

问题描述

开发指南中的myHighlight属性指令使用myHighlight名称作为两个属性选择器:

The myHighlight attribute directive in the dev guide uses the myHighlight name as both the attribute selector:

selector: '[myHighlight]',

和一个输入属性:

@Input('myHighlight') highlightColor: string;

我发现我们不必像这样指定选择器属性(尽管如果我们以这种方式编写，它仍然可以工作)是奇怪的/违反直觉的:

I find it odd/counterintuitive that we don't have to specify the selector attribute like this (although if we do write it this way, it still works):

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

相反，我们只需要指定输入属性，就可以神奇地获得该指令:

Instead, we only have to specify the input property, and we magically get the directive as well:

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

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

I don't like this "shortcut"/syntactic sugar/magic, since it looks like we're binding to the myHighlight property of the span element, rather than what is actually happening: we're binding to the myHighlight property of the myHighlight attribute directive. So, just by looking at the HTML, we can't easily determine which element/component/directive the myHighlight property is bound to.

为什么这样工作?

考虑以下HTML片段:

Consider this HTML fragment:

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

accessKey是HTML元素属性还是带有输入属性(也称为accessKey)的属性指令? (仅供参考，accessKey是有效的HTML元素属性，因此此示例不是属性指令.)

Is accessKey an HTML element property or an attribute directive with an input property also named accessKey? (FYI, accessKey is a valid HTML element property, so this example is not an attribute directive.)

回到Highlight指令...如果我将输入属性名称更改为highlightColor:

Getting back to the highlight directive... if I change the input property name to highlightColor:

@Input() highlightColor: string;

然后，我必须指定属性选择器以及属性绑定，我发现它不那么模棱两可:

Then I have to specify the attribute selector along with the property binding, which I find less ambiguous:

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

因此，仅当输入属性名称与属性选择器匹配时，快捷方式"才起作用.

So the "shortcut" only seems to work if the input property name matches the attribute selector.

更新:似乎结构指令使用相同的技巧/快捷方式.例如

Update: it seems structural directives use the same trick/shortcut. E.g.,

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

等效于

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

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

I just don't like the mixing of property name and selector.

推荐答案

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

At ng-conf 2016, I talked to Alex Rickabaugh, one of the Angular team members, about my concerns. He pointed out that the syntax is ambiguous in other ways as well. E.g., we discussed this syntax:

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

从读取HTML时我们无法确定whatIsThis是具有相同名称的input属性的指令还是whatIsThis是my-comp组件的输入属性.

We can't tell from reading the HTML if whatIsThis is a directive with an input property of the same name, or if whatIsThis is an input property of the my-comp component.

我猜想最重要的是，使用Angular 2，我们不能简单地查看HTML来了解正在发生的绑定类型.我们必须了解应用程序使用的指令和组件.闷闷不乐.

I guess the bottom line is that with Angular 2 we can't simply look at the HTML to understand what kind of binding is happening. We have to know about the directives and components the application uses. Bummer.

这篇关于为什么简单地[myHighlight] ="..."?为属性指令工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！