Perché semplicemente [myHighlight] = "..." funziona per una direttiva di attributo?

Question

La direttiva attributo myHighlight nel dev guide utilizza il nome myHighlight quanto sia il selettore di attributo:

selector: '[myHighlight]', 

e una proprietà di input:

@Input('myHighlight') highlightColor: string; 

Trovo strano/controintuitiva che non abbiamo per specificare l'attributo del selettore come questo (anche se lo scriviamo in questo modo, funziona ancora):

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

Invece, dobbiamo solo specificare la proprietà di input, e noi otteniamo magicamente la direttiva così:

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

Non mi piace questa "scorciatoia"/sintattico zucchero/magia, dal momento che sembra che noi' legare nuovamente alla proprietà piuttosto che a ciò che sta realmente accadendo: stiamo vincolando alla proprietà myHighlight dell'attributo myHighlight. Quindi, osservando l'HTML, non possiamo facilmente determinare a quale elemento/componente/direttiva è associata la proprietà myHighlight.

Perché funziona in questo modo?

considerare questo frammento HTML:

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

È accessKey una proprietà elemento HTML o una direttiva attributo con una proprietà di input chiamato anche accessKey? (. Cordiali saluti, accessKey è una struttura elemento HTML valido, per cui questo esempio non è una direttiva di attributo)

Tornando alla direttiva clou ... se cambio il nome della proprietà di input per highlightColor:

@Input() highlightColor: string; 

Poi devo specificare il selettore di attributo insieme con la proprietà di legame, che trovo meno ambiguo:

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

Così la "scorciatoia" sembra funzionare solo se il nome della proprietà di ingresso corrisponda al selettore di attributo.

Aggiornamento: sembra che lo structural directives utilizzi lo stesso trucco/collegamento. Per esempio,

<p *ngIf="condition"> 
    text here 
</p> 

è equivalente a

<template [ngIf]="condition"> <--- binds input property ngIf to NgIf directive, not to template 
    <p> 
    text here 
    </p> 
</template> 

io proprio non mi piace la miscelazione di nome della proprietà e il selettore.

Answer 1

Al ng-conf 2016, ho parlato con Alex Rickabaugh, uno degli Angular team members, delle mie preoccupazioni. Ha sottolineato che la sintassi è ambigua anche in altri modi. Per esempio., Abbiamo discusso questa sintassi:

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

Non possiamo dire dalla lettura del HTML se whatIsThis è una direttiva con una proprietà di input con lo stesso nome, o se whatIsThis è una proprietà di input del componente my-comp.

Immagino che la linea di fondo sia che con Angular 2 non possiamo semplicemente guardare l'HTML per capire che tipo di legame sta accadendo. Dobbiamo conoscere le direttive e i componenti utilizzati dall'applicazione. Bummer.