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来了解发生了什么样的绑定.我们必须了解应用程序使用的指令和组件.游民. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 另一个scala类型不匹配错误
- scala – 如何集成Play(Web框架),Deadbolt(授权)和Slick(数
- docker容器中的mysql无法在os x上运行已安装的卷
- 终端 – 将进度条添加到AppleScript中“执行shell脚本”的对
- angularjs – 事件$scope.$on(‘$destroy’)无法更新离子和
- [置顶] webservice系列2---javabean&handler
- 如何为angularjs/jasmine单元测试提供可重复使用的样本数据
- WebServices
- Angular vs React 最全面深入对比
- Powershell: powershell获取当前目录下最新创建的文件