У меня есть компонент Angular2 в этом компоненте, у него в настоящее время есть несколько полей, перед которыми применен @Input (), чтобы разрешить привязку к этому свойству, т.е.

@Input() allowDay: boolean;

То, что я хотел бы сделать, на самом деле привязать к свойству с помощью get / set, чтобы я мог выполнять другую логику в установщике, примерно такую ​​

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
set allowDay(value: boolean) {
     this._allowDay = value;
     this.updatePeriodTypes();
}

как мне это сделать в Angular2?

Основываясь на предложении Тьерри Темплиера, я изменил его на, но это вызывает ошибку. Невозможно привязать к 'allowDay', поскольку это не известное собственное свойство:

//@Input() allowDay: boolean;
_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
@Input('allowDay') set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

Paul Cavacas

Ответов: 4

Ответы (4)

Вы можете установить @ Input непосредственно на сеттере, как описано ниже:

_allowDay: логический;
get allowDay (): boolean {
    вернуть this._allowDay;
}
@Input () set allowDay (value: boolean) {
    this._allowDay = значение;
    this.updatePeriodTypes ();
}

См. Этот Plunkr: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview.

Если вас в основном интересует реализация логики только для установщика:

импорт {Component, Input, OnChanges, SimpleChanges} из '@ angular / core';

// [...]

класс экспорта MyClass реализует OnChanges {
  @Input () allowDay: логический;

  ngOnChanges (changes: SimpleChanges): void {
    if (изменяет ['allowDay']) {
      this.updatePeriodTypes ();
    }
  }
}

Импорт SimpleChanges не требуется, если не имеет значения, какое свойство ввода было изменено или если у вас есть только одно свойство ввода.

Angular Doc: OnChanges

иначе:

частный _allowDay: логический;

@Input () set allowDay (value: boolean) {
  this._allowDay = значение;
  this.updatePeriodTypes ();
}
get allowDay (): boolean {
  // другая логика
  вернуть this._allowDay;
}

@ Paul Cavacas, у меня была такая же проблема, и я решил, установив декоратор Input () над геттером.

  @Input('allowDays')
  get in(): any {
    return this._allowDays;
  }

  //@Input('allowDays')
  // not working
  set in(val) {
    console.log('allowDays = '+val);
    this._allowDays = val;
  }

См. Этот плунжер: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview

Обновлен принятый ответ на angular 7.0.1 на stackblitz здесь: https://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/ app / app.component.ts

директив больше нет в параметрах декоратора компонентов. Итак, я предоставил вспомогательную директиву для модуля приложения.

спасибо @ thierry-templier!

2022 WebDevInsider