Quand utiliser des crochets carrés [ ] dans les directives @Inputs et quand pas?

Question

Je suis un peu perdu, un peu.

Voir cette directive 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 mon html ressemblera à ceci:

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

La sortie sera:

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

Si je supprime le [] de l' myText:

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

La sortie sera:

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

Je peux également supprimer l' [] de myEnabled et il sera trop de travail. Voici donc ma confusion - quand j'ai besoin d'utiliser les crochets [] et quand pas, alors que je veux que l'utilisateur qui utilisera myDirective n'aurez plus jamais besoin de se demander si ou si non, je pense que les crochets [] doit toujours être là. N'est-ce pas?

Answer 1

Lorsque vous utilisez [] pour se lier à un @Input(),, c'est essentiellement un modèle d'expression.

De la même façon affichant {{abc}} ne serait pas afficher quoi que ce soit (à moins que vous aviez en fait une variable nommée abc).

Si vous avez une chaîne de caractères @Input(), et que vous souhaitez lier à une constante chaîne de caractères, vous pouvez lier comme ceci: [myText]=" 'some text' ", ou, en bref, comme un normal attribut HTML: myText="some text".

La raison en [myEnabled]="true" a fonctionné, c'est parce qu' true est un modèle valide expression qui, bien sûr, renvoie le booléen true.

Answer 2

Je pense que je comprends d'où ta confusion vient de. Quand vous dites [myText]="abc" vous attendent myText est une propriété définie dans mon composant dont la valeur que je veux initialiser pour abc. Mais ce n'est pas correct. Mais d'abord, voyons un peu plus à propos de HTML.

En HTML, vous pouvez définir un élément comme ça.

<input type="text" value="Bob">

l'entrée est un élément dont l' attributes sont de type et de valeur. Lorsque votre navigateur analyse le présent, il va créer un DOM entrée (d'un objet) pour cet élément. Le DOM entrée a quelques properties comme aligner, baseURI, childNodes, les enfants, etc. Donc, c'est la différence entre HTML, les attributs et les propriétés DOM Voir référence.

La raison pour laquelle vous avez besoin de savoir c'est parce que, dans le monde de l'Angulaire, le seul rôle est d'initialiser les attributs de l'élément et de la directive de l'état. Lorsque vous écrivez une liaison de données, vous avez affaire exclusivement avec des propriétés et des événements de l'objet cible. Attributs HTML efficacement disparaître.

Tout cela signifie, c'est que si vous écrivez <img [src]="heroImageUrl"> cela signifie qu' src n'est PAS un attribut, mais c'est un property défini à l'intérieur de la cathédrale de img. Et le côté droit, en heroImageUrl est une expression de modèle.

La simple différence entre [myText]="abc" et myText="abc" , c'est que dans l'ancien, vous vous demandez angulaire de définir la PROPRIÉTÉ myText, où, dans la dernière, vous créez un ATTRIBUT appelé myText, et cet attribut aura sa propre propriété DOM. Angulaire ne traite pas avec des attributs.

Donc, pour résumer, en <div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div> , vous dites que:

1. appliquer la directive myDirective de mon élément div.
2. lier la variable myEnabled à l'expression sur le droit. L'expression dit - true, de sorte que la valeur de myEnabled est vrai.
3. lier la variable myText à l'expression sur le droit. L'expression dit - abc. Est-il abc défini? Non, si l'expression évaluée à undefined.

Answer 3

Les supports indiquent à Angular d'évaluer l'expression du modèle. Si vous omettez les crochets, Angular traite la chaîne comme une constante et initialise la propriété cible avec cette chaîne. Il n'évalue pas la chaîne!

Ne faites pas l'erreur suivante :

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

Answer 4

la liaison `` est pour les objets, sans elle la valeur est enchaînement. Faites attention aux types.

Dans le code

vous avez essayé de lier l'objet, mais l'objet n'est pas disponible, donc sa valeur est . D'autre part, si vous supprimez la liaison, puis l'objet est parti, vous avez seulement une valeur attribuée à la propriété.