Estoy un poco confundido.
Vea esta directiva simple:
@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 QUITO 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, aunque quiero que el usuario que va a usar myDirective nunca tenga que preguntarse si o no, creo que los corchetes [] siempre deben ser allá. ¿no es así?
Cuando usa [] para enlazar a un @Input() , es básicamente una expresión de plantilla.
De la misma manera, mostrar {{abc}} no mostraría nada (a menos que realmente tuviera una variable llamada abc ).
Si tiene una cadena @Input() y desea vincularla a una cadena constante, puede vincularla así: [myText]=" 'some text' " , o en resumen, 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 booleana true .
Si escribe <img [src]="heroImageUrl"> significa que el lado derecho heroImageUrl es una expresión de plantilla.
La diferencia simple entre [myText]="abc" y myText="abc" es que en el primero le está pidiendo a angular que establezca la PROPIEDAD de destino myText usando la expresión de plantilla abc , mientras que en el último establece la propiedad de destino llamada myText usando el cadena 'abc'.
Entendamos un poco más sobre HTML.
En HTML puedes definir un elemento como este.
<input type="text" value="Bob"> input es un elemento cuyos attributes son tipo y valor. Cuando su navegador analice esto, creará una entrada DOM (un objeto) para este elemento. La entrada DOM tendrá algunas properties como align, baseURI, childNodes, children, etc. Entonces, esa es la diferencia entre los atributos HTML y las propiedades DOM Ver referencia . A veces, el atributo y la propiedad tienen los mismos nombres, lo que genera confusión. Para la etiqueta de entrada anterior, tiene el value de atributo = Bob y también tiene un value de propiedad que tendrá el valor de lo que escriba en el cuadro de texto. En resumen, el atributo es lo que define sobre la etiqueta y la propiedad es lo que se genera en el árbol DOM.
En el mundo de Angular, la única función de los atributos es inicializar el elemento y posiblemente el estado de la directiva. Cuando escribe un enlace de datos, está tratando exclusivamente con propiedades y eventos del objeto de destino. Los atributos HTML desaparecen efectivamente.
Entonces, para resumir, en <div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div> esencialmente estás diciendo que:
myDirective a mi elemento div.myEnabled a la expresión de la derecha. La expresión dice true , por lo que el valor de myEnabled es true.myText a la expresión de la derecha. La expresión dice abc . ¿Hay algún abc definido? No, entonces la expresión se evaluó como indefinida.Los corchetes 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 cadena!
No cometas el siguiente error:
<!-- ERROR: HeroDetailComponent.hero expects a Hero object, not the string "currentHero" --> <hero-detail hero="currentHero"></hero-detail>comprobar: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding