web-dev-qa-db-fra.com

Comment définir les valeurs par défaut pour les propriétés du composant Angular 2?

Lors de l'écriture de composants Angular 2.0, comment définir les valeurs par défaut des propriétés?

Par exemple, je souhaite définir foo sur "barre" par défaut, mais la liaison peut être immédiatement résolue en "baz". Comment cela se passe-t-il dans les crochets du cycle de vie?

@Component({  
    selector: 'foo-component'
})
export class FooComponent {
    @Input()
    foo: string = 'bar';

    @Input()
    zalgo: string;

    ngOnChanges(changes){
          console.log(this.foo);
          console.log(changes.foo ? changes.foo.previousValue : undefined);
          console.log(changes.foo ? changes.foo.currentValue : undefined);
    }
}

Compte tenu des modèles suivants, voici ce que je suppose que les valeurs seraient. Ai-je tort?

<foo-component [foo] = 'baz'></foo-component>

// Logged to console: 
// 'baz'
// 'bar'
// 'baz'

<foo-component [zalgo] = 'released'></foo-component>

// Logged to console: 
// 'bar'
// undefined
// undefined
angulartypescript
60
Bryan Rayner

C'est un sujet intéressant. Vous pouvez jouer avec deux crochets de cycle de vie pour comprendre comment cela fonctionne: ngOnChanges et ngOnInit.

En gros, lorsque vous définissez la valeur par défaut sur Input, cela signifie qu'elle sera utilisée uniquement au cas où aucune valeur ne viendrait sur ce composant. Et la partie intéressante sera modifiée avant l'initialisation du composant.

Disons que nous avons de tels composants avec deux hooks de cycle de vie et une propriété provenant de input.

@Component({
  selector: 'cmp',
})
export class Login implements OnChanges, OnInit {
  @Input() property: string = 'default';

  ngOnChanges(changes) {
    console.log('Changed', changes.property.currentValue, changes.property.previousValue);
  }

  ngOnInit() {
    console.log('Init', this.property);
  }

}

Situation 1

Composant inclus dans HTML sans définition property valeur

Comme résultat, nous verrons dans la console: Init default

C'est moyen onChange n'a pas été déclenché. Init a été déclenchée et la valeur property est default comme prévu.

Situation 2

Composant inclus dans HTML avec propriété définie <cmp [property]="'new value'"></cmp>

Comme résultat, nous verrons dans la console:

Changednew valueObject {}

Initnew value

Et celui-ci est intéressant. Le premier a été déclenché onChange hook, ce qui a défini property sur new value, et la valeur précédente était objet vide! Et seulement après que onInit _ hook a été déclenché avec la nouvelle valeur de property.

89
Mikki