Angular2 @ get / setを使用したプロパティへの@Input

私はそのコンポーネントに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でこれをどのように行うのですか？

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

以下で説明するように、@ 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 。

主にセッターのみにロジックを実装することに関心がある場合：

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変更された入力プロパティが重要でない場合、または入力プロパティが1つしかない場合は、のインポートは必要ありません。

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

ここで、stackblitzのAngular 7.0.1に対する承認済みの回答を更新しました：https ://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/app/app.component.ts

directivesコンポーネントデコレータオプションにはありません。そのため、アプリモジュールにサブディレクティブを提供しました。

ありがとう@ thierry-templier！