☰

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

tag-icon • tag-icon angular typescript
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

ベストアンサー1

ngOnChangesそれは興味深いテーマです。との 2 つのライフサイクル フックを試して、それがどのように機能するかを理解することができます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

つまり、mean はonChangeトリガーされませんでした。Init がトリガーされ、property値はdefault予想どおりです。

状況2

設定されたプロパティを持つHTMLに含まれるコンポーネント <cmp [property]="'new value'"></cmp>

結果としてコンソールに次の内容が表示されます:

Changed new value Object {}

Init new value

これは興味深い。まずはonChangeフックがトリガーされ、propertyに設定されnew value、以前の値は空のオブジェクトonInit! そして、そのフックが の新しい値でトリガーされた後にのみproperty、 。

おすすめ記事