myHighlight директива атрибута вруководство разработчика используетmyHighlight имя как селектор атрибута:

selector: '[myHighlight]',

и входное свойство:

@Input('myHighlight') highlightColor: string;

Я нахожу странным / нелогичным, что нам не нужно указывать атрибут селектора следующим образом (хотя, если мы напишем его таким образом, он все равно будет работать):

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

Вместо этого нам нужно только указать свойство input, и мы волшебным образом получаем директиву:

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

Мне не нравится этот "ярлык" / синтаксический сахар / магия, так как похоже, что мы привязываемся кmyHighlight собственностьspan элемент, а не то, что на самом деле происходит: мы привязаны кmyHighlight собственностьmyHighlight директива атрибута. Таким образом, просто взглянув на HTML, мы не можем легко определить, какой элемент / компонент / директиваmyHighlight собственность связана с.

Почему это работает так?

Рассмотрим этот фрагмент HTML:

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

ЯвляетсяaccessKey свойство элемента HTML или директива атрибута со свойством ввода, также названнымaccessKey? (FYI,accessKey является допустимым свойством элемента HTML, поэтому этот пример не является директивой атрибута.)

Возвращаясь к директиве выделения ... если я изменю имя входного свойства на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>

Мне просто не нравится смешивание имени свойства и селектора.