Jak ustawić wartości domyślne właściwości Angular 2 component?

Question

Podczas pisania komponentów Angular 2.0, w jaki sposób można ustawić wartości domyślne dla właściwości?

Na przykład - chcę ustawić domyślnie foo na 'bar', ale wiązanie może natychmiast przerwać na 'baz'. Jak to się dzieje w hakach w całym cyklu życia?

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

Biorąc pod uwagę następujące szablony, oczekuję, że będą to wartości. Czy się mylę?

<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

To interesujący temat. Możesz grać z dwoma hakami cyklu życia, aby dowiedzieć się, jak to działa: ngOnChanges i ngOnInit.

Zasadniczo po ustawieniu wartości domyślnej na Input oznacza to, że będzie ona używana tylko w przypadku, gdy nie będzie żadnej wartości wchodzącej w skład tego składnika. I interesująca część zostanie zmieniona przed zainicjowaniem komponentu.

Załóżmy, że mamy takie komponenty z dwoma hakami cyklu życia i jedną właściwością pochodzącą z 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); 
    } 

} 

Sytuacja 1

Komponent zawarte w html bez określonej wartości property

W efekcie zobaczymy w konsoli: Init default

To średni onChange nie został uruchomiony. Init został wyzwolony, a wartość property jest zgodna z oczekiwaniami default.

Sytuacja 2

Komponent zawarte w html z setted własności<cmp [property]="'new value'"></cmp>

W efekcie zobaczymy w konsoli:

Changednew valueObject {}

Initnew value

A ten jest interesujący. Najpierw został uruchomiony hak onChange, który ustawił property na new value, a poprzednia wartość to pusty obiekt! I dopiero po tym haczyku onInit został wyzwolony z nową wartością property.