Как установить значения по умолчанию для свойств Angular 2 компонента?

При написании компонентов Angular 2.0, как установить значения по умолчанию для свойств?

Например, я хочу установить foo в "bar" по умолчанию, но привязка может сразу перейти к "baz". Как это происходит на крюках жизненного цикла?

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

Учитывая следующие шаблоны, это то, что я ожидаю, что значения будут. Я не прав?

<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

Это интересная тема. Вы можете поиграть с двумя крючками жизненного цикла, чтобы выяснить, как это работает: ngOnChanges и ngOnInit.

В основном, когда вы устанавливаете значение по умолчанию на Input, это означает, что он будет использоваться только в том случае, если на этом компоненте не будет значения. И интересная часть будет изменена до того, как компонент будет инициализирован.

Скажем, у нас есть такие компоненты с двумя крючками жизненного цикла и одним свойством, исходящим из 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);
  }

}

Ситуация 1

Компонент, включенный в html без определенного значения property

В результате мы увидим в консоли: Init default

Это означает, что onChange не был вызван. Инициатор был инициирован, а значение property default, как и ожидалось.

Ситуация 2

Компонент, включенный в html с установленным свойством <cmp [property]="'new value'"></cmp>

В результате мы увидим в консоли:

Changed new value Object {}

Init new value

И это интересно. Сначала был вызван крючок onChange, который установил property в new value, а предыдущее значение было пустой объект! И только после этого был запущен крючок onInit с новым значением property.