为什么简单地 [myHighlight]=“..."为属性指令工作? [英] Why does simply [myHighlight]="..." work for an attribute directive?
问题描述
dev 中的 myHighlight 属性指令guide 使用 myHighlight 名称作为属性选择器:
selector: '[myHighlight]',和一个输入属性:
@Input('myHighlight') highlightColor: string;我觉得奇怪/违反直觉，我们不必像这样指定选择器属性(尽管如果我们这样写，它仍然有效):
<span myHighlight [myHighlight]="color">突出显示我</span>相反，我们只需要指定 input 属性，我们也神奇地获得了指令:
<span [myHighlight]="color">突出显示我</span>我不喜欢这个快捷方式"/语法糖/魔法，因为它看起来我们绑定到 span 元素的 myHighlight 属性，而不是而不是实际发生的事情:我们绑定到 myHighlight 属性指令的 myHighlight 属性.因此，仅通过查看 HTML，我们无法轻松确定 myHighlight 属性绑定到哪个元素/组件/指令.
为什么会这样?
考虑这个 HTML 片段:
accessKey 是一个 HTML 元素属性还是一个属性指令，其输入属性也名为 accessKey?(仅供参考，accessKey 是有效的 HTML 元素属性，因此此示例不是属性指令.)
回到高亮指令...如果我将输入属性名称更改为 highlightColor:
@Input() highlightColor: string;
然后我必须指定属性选择器和属性绑定，我觉得这不太模糊:
<span myHighlight [highlightColor]="color">突出显示我</span>
因此，快捷方式"似乎仅在输入属性名称与属性选择器匹配时才有效.
更新:似乎结构指令 使用相同的技巧/捷径.例如，
在这打字</p>
相当于
<--- 将输入属性 ngIf 绑定到 NgIf 指令，而不是模板<p>在这打字</p>
我只是不喜欢混合使用属性名称和选择器.
解决方案 At ng-conf 2016，我与 Angular 团队成员之一的 Alex Rickabaugh 谈了我的担忧.他指出，语法在其他方面也有歧义.例如，我们讨论了这种语法:
<my-comp [whatIsThis]="someProperty">
我们无法通过读取 HTML 来判断 whatIsThis 是否是具有同名输入属性的指令，或者 whatIsThis 是否是 whatIsThis 的输入属性code>my-comp 组件.
我想最重要的是，对于 Angular 2，我们不能简单地查看 HTML 来了解正在发生的绑定类型.我们必须了解应用程序使用的指令和组件.无赖.
The myHighlight attribute directive in the dev guide uses the myHighlight name as both the attribute selector:
selector: '[myHighlight]',
and an input property:
@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>
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.
Why does it work this way?
Consider this HTML fragment:
<div [accessKey]="...">
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.)
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>
is equivalent to
<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.
解决方案 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">
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.
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屋！
查看全文
