Angular2 @Input到一个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();
}

当前回答

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

组件装饰器选项中不再有指令。所以我给app模块提供了子指令。

2018-12-17 13:41:51

其他回答

你可以直接在setter上设置@Input，如下所示:

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

看看这个Plunkr: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview。

2016-04-15 17:48:13

@Paul Cavacas，我也有同样的问题，我通过在getter上面设置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

2016-11-21 19:52:53

如果你只对实现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;
}

2016-11-23 12:04:39

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

组件装饰器选项中不再有指令。所以我给app模块提供了子指令。

2018-12-17 13:41:51

Angular2 @Input到一个get/set属性中

推荐文章

最新文章

标签