角度2コンポーネントのプロパティのデフォルト値を設定するにはどうすればよいですか？

Question

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 

Answer 1

これは興味深いテーマです。 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

コンポーネントが定義されてproperty値なしにHTMLに含まれて私たちは、コンソールに表示される結果

：onChangeがトリガされていなかった平均値です Init default

。 Initがトリガーされ、propertyの値はdefaultになります。

状況2

コンポーネントはsettedプロパティでHTMLに含まれて私たちは、コンソールに表示される結果<cmp [property]="'new value'"></cmp>

：

Changednew valueObject {}

Initnew value

これは面白いです。最初にonChangeフックが起動され、propertyからnew valueに設定され、以前の値はの空のオブジェクトでした。その後、propertyという新しい値でonInitフックがトリガされただけです。