Bagaimana cara mengatur nilai default untuk properti komponen Angular 2?

Saat menulis komponen Angular 2.0, bagaimana cara menetapkan nilai default untuk properti?

Misalnya - Saya ingin menyetel fooke 'bar'secara default, tetapi pengikatan mungkin langsung diselesaikan ke 'baz'. Bagaimana hal ini berperan dalam kait siklus hidup?

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

Dengan templat berikut, inilah yang saya harapkan nilainya. Apakah aku salah?

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

Masuk ke konsol:

'baz'
'bar'
'baz'

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

Masuk ke konsol:

'bar'
undefined
undefined

Itu topik yang menarik. Anda dapat bermain-main dengan dua pengait siklus hidup untuk mengetahui cara kerjanya: ngOnChangesdan ngOnInit.

Pada dasarnya ketika Anda menyetel nilai default menjadi Inputitu berarti itu akan digunakan hanya jika tidak akan ada nilai yang datang pada komponen itu. Dan yang menarik adalah diubah sebelum komponen diinisialisasi.

Katakanlah kita memiliki komponen seperti itu dengan dua kait siklus hidup dan satu properti berasal 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);
  }

}

Situasi 1

Komponen disertakan dalam html tanpa propertynilai yang ditentukan

Hasilnya kita akan lihat di konsol: Init default

Itu berarti onChangetidak dipicu. Init dipicu dan propertynilainya defaultseperti yang diharapkan.

Situasi 2

Komponen disertakan dalam html dengan properti setted <cmp [property]="'new value'"></cmp>

Hasilnya kita akan lihat di konsol:

Changed new value Object {}

Init new value

Dan yang ini menarik. Pertama adalah onChangehook yang dipicu , yang diatur propertyke new value, dan nilai sebelumnya adalah objek kosong ! Dan hanya setelah itu onInithook dipicu dengan nilai baru property.

Inilah solusi terbaik untuk ini. (ANGULAR Semua Versi)

Solusi pengalamatan : Untuk menyetel nilai default untuk variabel @Input . Jika tidak ada nilai yang diteruskan ke variabel input itu maka itu akan mengambil nilai default .

Saya telah memberikan solusi untuk pertanyaan serupa semacam ini. Anda dapat menemukan solusi lengkapnya dari sini

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