Почему просто [myHighlight] = "..." работает для директивы атрибута?

Директива атрибута 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>

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

Ответы

Ответ 1

В ng-conf 2016 я поговорил с Алексом Рикабо, одним из Angular членов команды, о моих проблемах. Он отметил, что синтаксис неоднозначен и другими способами. Например, мы обсудили этот синтаксис:

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

Мы не можем сказать, прочитав HTML, если whatIsThis - это директива с входным свойством с тем же именем или если whatIsThis является входным свойством компонента my-comp.

Я предполагаю, что нижняя строка заключается в том, что с Angular 2 мы не можем просто взглянуть на HTML, чтобы понять, что такое привязка. Мы должны знать о директивах и компонентах, которые использует приложение. Облом.