Come impostare i valori predefiniti per le proprietà del componente Angular 2?

Question

Quando si scrivono componenti Angular 2.0, come si impostano i valori predefiniti per le proprietà?

Ad esempio: voglio impostare foo su "bar" per impostazione predefinita, ma l'associazione potrebbe risolversi immediatamente in "baz". Come si svolge questo nei ganci del ciclo di vita?

@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); 
    } 
} 

Dato i seguenti modelli, questo è quello che mi aspetto che i valori siano. Ho sbagliato?

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

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

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

Logged to console: 
'bar' 
undefined 
undefined 

Answer 1

Questo è un argomento interessante. È possibile giocare con due hook del ciclo di vita per capire come funziona: ngOnChanges e ngOnInit.

Fondamentalmente quando si imposta il valore predefinito su Input significa che verrà utilizzato solo nel caso in cui non ci sarà alcun valore in arrivo su quel componente. E la parte interessante verrà modificata prima che il componente venga inizializzato.

Supponiamo di avere tali componenti con due hook di ciclo di vita e una proprietà proveniente da 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); 
    } 

} 

Situazione 1

componente incluso in formato HTML senza definito property valore

Come risultato vedremo in consolle: Init default

Ecco media onChange non è stato attivato. Init è stato attivato e il valore property è default come previsto.

Situazione 2

componente incluso in html con la proprietà impostato<cmp [property]="'new value'"></cmp>

Come risultato vedremo in consolle:

Changednew valueObject {}

Initnew value

E questo è interessante. Innanzitutto è stato attivato l'hook onChange, che ha impostato property su new value e il valore precedente era oggetto vuoto! E solo dopo che il gancio onInit è stato attivato con il nuovo valore di property.