Angular 2 bileşen özellikleri için varsayılan değerler nasıl ayarlanır?

Angular 2.0 bileşenleri yazarken, özellikler için varsayılan değerler nasıl ayarlanır?

Örneğin - Sette istiyorum fooiçin 'bar'varsayılan olarak, ancak bağlayıcı kudreti derhal çözümlemek 'baz'. Yaşam döngüsü kancalarında bu nasıl oynanır?

@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);
    }
}

Aşağıdaki şablonlar göz önüne alındığında, değerlerin olmasını beklediğim budur. Yanlış mıyım?

<foo-component [foo] = 'baz'></foo-component>

Konsolda oturum açıldı:

'baz'
'bar'
'baz'

<foo-component [zalgo] = 'released'></foo-component>

Konsolda oturum açıldı:

'bar'
undefined
undefined

Bu ilginç bir konu. Nasıl çalıştığını anlamak için iki yaşam döngüsü kancasıyla oynayabilirsiniz: ngOnChangesve ngOnInit.

Temel olarak, varsayılan değeri olarak ayarladığınızda Input, bu, yalnızca o bileşende hiçbir değer gelmeyeceği durumda kullanılacağı anlamına gelir. Ve ilginç kısım, bileşen başlatılmadan önce değiştirilecek.

Diyelim ki iki yaşam döngüsü kancasına ve bir özelliğinden gelen bu tür bileşenlerimiz var 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);
  }

}

Durum 1

Tanımlanmış propertydeğer olmadan html'ye dahil edilen bileşen

Sonuç olarak konsolda göreceğiz: Init default

Bu onChangetetiklenmedi demek . Init tetiklendi ve propertydeğer defaultbeklendiği gibi.

Durum 2

Ayarlanmış özelliğe sahip html'ye dahil bileşen <cmp [property]="'new value'"></cmp>

Sonuç olarak konsolda göreceğiz:

Changed new value Object {}

Init new value

Ve bu ilginç. Öncelikle tetiklenen oldu onChangesetted kanca, propertyiçin new valueve önceki değer boş nesne ! Ve ancak bu onInitkanca yeni değeri ile tetiklendikten sonra property.

İşte bunun için en iyi çözüm. (ANGULAR Tüm Sürüm)

Adresleme çözümü : @Input değişkeni için varsayılan bir değer ayarlamak için . Bu giriş değişkenine hiçbir değer geçilmezse , o zaman varsayılan değeri alır .

Bu tür benzer sorulara çözüm getirdim. Tam çözümü buradan bulabilirsiniz

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);
  }
}