data - directivas estructurales angular
¿Cuándo utilizar corchetes[] en las directivas @Inputs y cuándo no? (3)
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.
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?
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
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.