Question

我在该组件中有一个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的建议，我将其更改为，但是这会引发错误，无法绑定到＆＃39; allowDay＆＃39;因为它不是一个已知的原生财产：

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

Answer 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。

Answer 2

如果您主要对 setter ：

的逻辑实施感兴趣

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

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

请参阅此plunker：https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview

Answer 4

更新了关于stackblitz上的7.0.1的可接受答案：https://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/app/app.component.ts

directives不再位于组件装饰器选项中。因此，我为应用模块提供了子指令。

谢谢@thierry-templier！

Angular2 @Input到具有get / set的属性

4 个答案: