Як встановити значення за замовчуванням для властивостей компонента 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

Це цікава тема. Ви можете пограти з двома гачками життєвого циклу, щоб зрозуміти, як це працює: ngOnChangesі ngOnInit.

В основному, коли ви встановлюєте значення за замовчуванням Input, це означає, що воно буде використовуватися лише у випадку, якщо значення цього компонента не надходить. І цікава частина буде змінена до ініціалізації компонента.

Скажімо, у нас є такі компоненти з двома гачками життєвого циклу та однією властивістю, що надходить 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це не спрацьовувало. Ініціювання було запущено, і propertyзначення defaultвідповідає очікуваному.

Ситуація 2

Компонент, що входить до html із встановленим властивістю <cmp [property]="'new value'"></cmp>

Як результат ми побачимо в консолі:

Changed new value Object {}

Init new value

І цей цікавий. Спочатку був запущений onChangeхук, який встановлено propertyна new value, а попереднє значення було порожнім об'єктом ! І лише після цього onInitгачок був спрацьований з новим значенням property.

Ось найкраще рішення для цього. (ANGULAR All Version)

Рішення для адресації : Щоб встановити значення за замовчуванням для змінної @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);
  }
}