Angular2 @ Вход в свойство с помощью get / set

У меня есть компонент 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();
}

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

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}

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

Смотрите этот план: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview .

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

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

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

Angular Doc: OnChanges

в противном случае:

private _allowDay: boolean;

@Input() set allowDay(value: boolean) {
  this._allowDay = value;
  this.updatePeriodTypes();
}
get allowDay(): boolean {
  // other logic
  return 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

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

спасибо @ Thierry-TEMPLIER !