Wann sollten eckige Klammern [] in Anweisungen @Inputs verwendet werden und wann nicht?

Question

Ich bin ein wenig verwirrt.

Sehen Sie diese einfache Richtlinie:

@Directive({ 
     selector: '[myDirective]' 
    }) 
    export class MyDirective { 

     private text: string; 
     private enabled: boolean; 

     @Input() myDirective:string; 

     @Input('myText') 
     set myText(val: string) { 
     this.text = val; 
     } 

     @Input('myEnabled') 
     set myEnabled(val: boolean) { 
     this.enabled = val; 
     } 

     ngOnInit() { 

     console.log("myDirective string: " + this.myDirective); 
     console.log("myText string: " + this.text); 
     console.log("myEnabled boolean: " + this.enabled); 
    } 
} 

wenn meine html wie folgt aussehen:

<div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div> 

Der Ausgang wird sein:

myDirective string: myDefaultText real value // good 
myEnabled boolean: true      // good 
myText string: undefined      // Why? 

Wenn ich die [Löschen] aus myText:

<div [myDirective]="myDefaultText" [myEnabled]="true" myText="abc"></div> 

wird der Ausgang sein:

myDirective string: myDefaultText real value // good 
myEnabled boolean: true      // good 
myText string: abc       // GOOD 

ich auch die [] von myEnabled entfernen kann und es auch funktionieren. Also hier ist meine Verwirrung - wenn ich eckige Klammern verwenden muss [] und wenn nicht, während ich möchte, dass der Benutzer myDirective verwenden wird nie fragen müssen, ob oder wenn nicht, ich denke, die eckigen Klammern [] sollte immer da sein . Sind sie nicht?

Answer 1

Wenn Sie [] verwenden, um an eine @Input() zu binden, handelt es sich im Grunde um einen Vorlagenausdruck.

Auf die gleiche Weise würde die Anzeige {{abc}} nichts anzeigen (es sei denn, Sie hatten tatsächlich eine Variable namens abc).

Wenn Sie einen String @Input() haben, und Sie wollen, dass es zu einer konstanten Zeichenfolge binden, könnten Sie es binden wie folgt aus: [myText]=" 'some text' ", oder kurz gesagt, wie eine normale HTML-Attribut: myText="some text".

Der Grund [myEnabled]="true" arbeitete, weil true ein gültiger Vorlagenausdruck ist, der natürlich zu dem boolean true ausgewertet wird.

Answer 2

Die Klammern geben Angular an, den Vorlagenausdruck zu bewerten. Wenn Sie die Klammern weglassen, behandelt Angular die Zeichenfolge als Konstante und initialisiert die Zieleigenschaft mit dieser Zeichenfolge. Es bewertet die Zeichenfolge nicht!

Sie machen den folgenden Fehler nicht:

<!-- ERROR: HeroDetailComponent.hero expects a 
     Hero object, not the string "currentHero" --> 
    <hero-detail hero="currentHero"></hero-detail> 

Kontrolle: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

Answer 3

Bindung [] für Objekte ist, ohne dass es der Wert Zeichenfolge ist. Sei vorsichtig mit Typen.

Im Code

<div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div> 

Sie das Objekt zu binden, haben versucht, aber das Objekt nicht verfügbar ist, so ist es Wert undefined. Auf der anderen Seite, wenn Sie die Bindung entfernen, dann ist das Objekt weg, Sie haben nur einen string Wert der Eigenschaft zugewiesen.