Pertanyaan Bagaimana cara menetapkan nilai default untuk properti komponen Angular 2?


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

Misalnya - saya ingin mengatur foo untuk 'bar' secara default, tetapi pengikatannya mungkin segera diselesaikan ke 'baz'. Bagaimana ini bermain di hook 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);
    }
}

Berdasarkan template berikut, inilah yang saya harapkan akan nilainya. Apakah aku salah?

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

Logged to console: 
'baz'
'bar'
'baz'

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

Logged to console: 
'bar'
undefined
undefined

32
2018-03-17 21:23


asal


Jawaban:


Itu topik yang menarik. Anda dapat bermain-main dengan dua kait siklus hidup untuk mencari tahu cara kerjanya: ngOnChanges dan ngOnInit.

Pada dasarnya ketika Anda menetapkan nilai default ke Input itu berarti itu akan digunakan hanya jika tidak akan ada nilai yang datang pada komponen itu. Dan bagian yang menarik itu akan diubah sebelum komponen akan 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 termasuk dalam html tanpa didefinisikan property nilai

Sebagai hasilnya, kita akan melihat di konsol: Init default

Itu jahat onChange tidak dipicu. Init dipicu dan property nilainya adalah default seperti yang diharapkan.

Situasi 2

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

Sebagai hasilnya, kita akan melihat di konsol:

Changed  new value  Object {}

Init  new value

Dan yang ini menarik. Pertama dipicu onChange hook, yang disetel property untuk new value, dan nilai sebelumnya adalah objek kosong! Dan hanya setelah itu onInit hook dipicu dengan nilai baru property.


39
2017-08-30 05:57