data - directivas estructurales angular

¿Cuándo utilizar corchetes[] en las directivas @Inputs y cuándo no?

Question

Estoy un poco confundido.

Vea esta sencilla directiva:

 @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);
    }
}

si mi html se verá así:

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

La salida será:

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

Si myText el [] de myText :

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

La salida será:

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

También puedo eliminar el [] de myEnabled y también funcionará. Así que aquí está mi confusión: cuando necesito usar corchetes [] y cuando no, mientras que el usuario que va a usar myDirective nunca tendrá que preguntarse si o no, creo que los corchetes [] siempre deberían estar ahí. ¿No lo son?

Answer 1

Cuando usa [] para enlazar con un @Input() , es básicamente una expresión de plantilla.

De la misma manera, mostrar {{abc}} no mostraría nada (a menos que en realidad tuviera una variable llamada abc ).

Si tiene una cadena @Input() , y desea @Input() a una cadena constante, puede [myText]=" ''some text'' " así: [myText]=" ''some text'' " , o en pocas palabras, como un atributo HTML normal: myText="some text" .

La razón por la que [myEnabled]="true" funcionó es porque true es una expresión de plantilla válida que, por supuesto, se evalúa como true boolean.

Answer 2

Los paréntesis le dicen a Angular que evalúe la expresión de la plantilla. Si omite los corchetes, Angular trata la cadena como una constante e inicializa la propiedad de destino con esa cadena. ¡No evalúa la cuerda!

No cometas el siguiente error:

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

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

Answer 3

binding [] es para objetos, sin él el valor es una cadena. Ten cuidado con los tipos.

En el codigo

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

ha intentado enlazar el objeto, pero el objeto no está disponible, por lo tanto, su valor undefined está undefined . Por otro lado, si elimina el enlace, el objeto desaparece, solo tiene un valor de string asignado a la propiedad.