[解決済み] 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>

コンソールにログ出力されました。

'baz'
'bar'
'baz'

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

コンソールにログ出力されました。

'bar'
undefined
undefined

解決方法は？

それは興味深いテーマですね。 2つのライフサイクルフックを使って、それがどのように機能するかについて遊ぶことができます。 ngOnChanges と ngOnInit .

基本的に、デフォルト値を Input これは、そのコンポーネントに値が入力されない場合のみ使用されることを意味します。 そして面白いのは、この値はコンポーネントが初期化される前に変更されることです。

このようなコンポーネントがあり、2つのライフサイクルフックと1つのプロパティが 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 はトリガーされませんでした。Initがトリガーされ property の値が default は期待通りです。

シチュエーション2

htmlに含まれるコンポーネントで、プロパティが設定されているもの <cmp [property]="'new value'"></cmp>

その結果、コンソールに表示されます。

Changed new value Object {}

Init new value

そして、これが面白いんです。まず最初にトリガーされたのは onChange フックが設定され、それが property から new value であり、以前の値は 空オブジェクト ! そして、その後に onInit の新しい値でフックがトリガーされました。 property .