Angular2 @Ввод в свойство с get/set

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

@Input() allowDay: boolean;

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

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

как бы это сделать в Angular2?

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

@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