Angular2 @Masukan untuk properti dengan get/set

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();
}
simbabque
Pertanyaan edit 13 Maret 2019 в 10:29
Pemrograman
angular
15 April 2016 в 5:44
1 tampilan
Mengomentari pertanyaan (3)
Larutan

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.

Thierry Templier
Jawaban edit 16 April 2016 в 6:57
Komentar (8)

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.

Sudut Doc: OnChanges

jika:

private _allowDay: boolean;

@Input() set allowDay(value: boolean) {
  this._allowDay = value;
  this.updatePeriodTypes();
}
get allowDay(): boolean {
  // other logic
  return this._allowDay;
}
Martin Schneider
Jawaban edit 12 April 2018 в 7:56
Komentar (5)

@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

George Kagan
Jawaban edit 21 November 2016 в 8:18
Komentar (2)

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!

Komentar (0)