Saya memiliki sebuah Angular2 komponen dalam komponen tersebut saat ini memiliki banyak bidang yang telah @Input() diterapkan sebelum mereka memungkinkan mengikat untuk properti tersebut, yaitu
@Input() allowDay: boolean;
Apa yang saya ingin lakukan adalah benar-benar mengikat untuk properti dengan get/set, sehingga saya dapat melakukan beberapa logika lain dalam setter, sesuatu seperti berikut
_allowDay: boolean;
get allowDay(): boolean {
return this._allowDay;
}
set allowDay(value: boolean) {
this._allowDay = value;
this.updatePeriodTypes();
}
bagaimana saya melakukan ini di Angular2?
Berdasarkan Thierry Templier saran saya berubah, tapi yang melempar kesalahan Dapat't mengikat 'allowDay' sejak itu isn't yang diketahui berasal properti :
//@Input() allowDay: boolean;
_allowDay: boolean;
get allowDay(): boolean {
return this._allowDay;
}
@Input('allowDay') set allowDay(value: boolean) {
this._allowDay = value;
this.updatePeriodTypes();
}
Anda bisa mengatur @Input pada setter langsung, seperti yang dijelaskan di bawah ini:
_allowDay: boolean;
get allowDay(): boolean {
return this._allowDay;
}
@Input('allowDay')
set allowDay(value: boolean) {
this._allowDay = value;
this.updatePeriodTypes();
}
Melihat ini plunkr: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview.
Jika anda terutama tertarik dalam mengimplementasikan logika ke setter hanya:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
// [...]
export class MyClass implements OnChanges {
@Input() allowDay: boolean;
ngOnChanges(changes: SimpleChanges): void {
if(changes['allowDay']) {
this.updatePeriodTypes();
}
}
}
Impor SimpleChanges
tidak diperlukan jika itu doesn't peduli input properti diubah atau jika anda hanya memiliki satu input properti.
jika:
private _allowDay: boolean;
@Input() set allowDay(value: boolean) {
this._allowDay = value;
this.updatePeriodTypes();
}
get allowDay(): boolean {
// other logic
return this._allowDay;
}
@Paul Cavacas, saya memiliki masalah yang sama dan saya diselesaikan dengan menetapkan Input()
dekorator di atas getter.
@Input('allowDays')
get in(): any {
return this._allowDays;
}
//@Input('allowDays')
// not working
set in(val) {
console.log('allowDays = '+val);
this._allowDays = val;
}
Melihat ini plunker: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview
Diperbarui jawaban yang diterima untuk sudut 7.0.1 pada stackblitz berikut: https://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/app/app.komponen.ts
arahan
ada lagi di Komponen dekorator pilihan. Jadi saya harus disediakan sub direktif untuk aplikasi modul.
terima kasih @thierry-templier!