Comment définir les valeurs par défaut pour les propriétés des composants Angular 2?
Lors de l'écriture de composants Angular 2.0, comment définit-on les valeurs par défaut pour les propriétés?
Par exemple - je veux définir foo à ' bar 'par défaut, mais la liaison peut immédiatement se résoudre à 'baz'. Comment cela se joue-t-il dans les crochets de 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, c'est ce que j'attends des valeurs. Suis-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
1 réponses
C'est un sujet intéressant.
Vous pouvez jouer avec deux crochets de cycle de vie pour comprendre comment cela fonctionne: ngOnChanges et ngOnInit.
Fondamentalement, lorsque vous définissez la valeur par défaut sur Input, cela signifie qu'elle sera utilisée uniquement au cas où il n'y aurait pas de valeur sur ce composant.
Et la partie intéressante sera modifiée avant que le composant ne soit initialisé.
Disons que nous avons de tels composants avec deux crochets 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 valeur property définie
Comme résultat, nous verrons dans la console:
Init default
C'est dire que onChange n'a pas été déclenché. Init a été déclenché et la valeur property est {[9] } comme prévu.
Situation 2
Composant inclus dans le html avec sertie de propriété <cmp [property]="'new value'"></cmp>
En conséquence, nous verrons dans la console:
Changed new value Object {}
Init new value
Et celui-ci est intéressant. Tout d'abord été déclenchée onChange crochet, qui programmés property à new value, et la valeur précédente était objet vide! Et seulement après que onInit hook a été déclenché avec une nouvelle valeur de property.