Warum funktioniert einfach [myHighlight] = "..." für eine Attributrichtlinie?

Question

Das myHighlight Attribut-Direktive in den dev guide verwendet die myHighlight Namen sowohl als Attributselektor:

selector: '[myHighlight]', 

und eine Eingang Eigenschaft:

@Input('myHighlight') highlightColor: string; 

Ich finde es seltsam/eingängig, dass wir nicht haben, um das Selektorattribut so zu spezifizieren (obwohl, wenn wir es so schreiben, es immer noch funktioniert):

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

Stattdessen müssen wir nur den Eingang Eigenschaft angeben, und wir auf magische Weise die Richtlinie auch erhalten:

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

Ich mag nicht diese „Abkürzung“/syntaktischer Zucker/Magie, da es sieht aus wie wir Re Bindung an die myHighlight Eigenschaft des span Elements, anstatt was tatsächlich passiert: Wir sind verbindlich an die myHighlight Eigenschaft der myHighlight Attribut-Direktive. Wir können also nicht einfach feststellen, welches Element/welche Komponente/Direktive die myHighlight-Eigenschaft ist.

Warum funktioniert es so?

HTML-Fragment vor:

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

Ist accessKey ein HTML-Element-Eigenschaft oder ein Attribut-Richtlinie mit einer Eingangs Eigenschaft auch accessKey benannt? (. FYI, accessKey ist eine gültige HTML-Element-Eigenschaft, so dass dieses Beispiel ist kein Attribut Richtlinie)

Kommen wir zurück auf die Highlight-Richtlinie ... wenn ich den Eingang Eigenschaftsnamen highlightColor ändern:

@Input() highlightColor: string; 

Dann muss ich zusammen mit der Eigenschaft Bindung des Attributselektor angeben, die ich weniger zweideutig finden:

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

So ist die „Abkürzung“ nur dann, wenn die Eingangseigenschaftsnamen des Attributselektor passt zu funktionieren scheint.

Update: es scheint structural directives Verwenden Sie den gleichen Trick/Shortcut. Z. B.

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

entspricht

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

ich nicht das Mischen von Eigenschaftsnamen und Wähler einfach nicht, wie.

Answer 1

Bei ng-conf 2016 sprach ich mit Alex Rickabaugh, einer der Angular team members, über meine Bedenken. Er wies darauf hin, dass die Syntax auch auf andere Weise mehrdeutig ist. Z.B.Diskutierten wir diese Syntax:

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

Wir sind nicht aus der Lektüre der HTML sagen kann, ob whatIsThis eine Richtlinie mit einer Eingangs Eigenschaft des gleichen Namens ist, oder wenn whatIsThis ein Eingangs Eigenschaft des my-comp Komponente.

Ich denke, das Endergebnis ist, dass mit Angular 2 wir nicht einfach auf das HTML schauen können, um zu verstehen, welche Art von Bindung passiert. Wir müssen über die Richtlinien und Komponenten Bescheid wissen, die die Anwendung verwendet. Bummel.