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

Question 1

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

Question 2

それは興味深いテーマです。あなたはそれがどのように動作するかを理解するために、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。

Question 3

これに最適なソリューションを次に示します。（ANGULAR 7、8、9）

対処法：@Input変数のデフォルト値を設定します。場合は何も値が渡されないという入力変数に、それはデフォルト値をとります。

私はこの種の同様の質問に対する解決策を提供しました。あなたはここから完全な解決策を見つけることができます

export class CarComponent implements OnInit {
  private _defaultCar: car = {
    // default isCar is true
    isCar: true,
    // default wheels  will be 4
    wheels: 4
  };

  @Input() newCar: car = {};

  constructor() {}

  ngOnInit(): void {

   // this will concate both the objects and the object declared later (ie.. ...this.newCar )
   // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT

    this.newCar = { ...this._defaultCar, ...this.newCar };
   //  console.log(this.newCar);
  }
}