Директива атрибута myHighlight
в dev guide использует имя 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]="...">
Является ли accessKey
свойство элемента HTML или директива атрибута со свойством ввода, также называемым accessKey
? (FYI, accessKey
является допустимым свойством HTML-элемента, поэтому этот пример не является директивой атрибута.)
Возвращаясь к директиве highlight... если я изменю имя свойства ввода на 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>
Мне просто не нравится смешение имени и селектора свойств.