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
定義されたproperty値なしでHTMLに含まれるコンポーネント
その結果、コンソールに次のように表示されます。 Init default
つまり、onChangeトリガーされなかったということです。初期化がトリガーされ、property値はdefault期待どおりです。
状況2
プロパティが設定されたHTMLに含まれるコンポーネント <cmp [property]="'new value'"></cmp>
その結果、コンソールに次のように表示されます。
Changed new value Object {}
Init new value
そして、これは面白いです。まず、トリガされたonChangesettedフック、propertyにしnew valueて、前の値となった空のオブジェクト！そして、そのonInitフックがの新しい値でトリガーされた後にのみproperty。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加