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();
}
330301 次浏览
小开
最佳答案

你可以直接在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。

小开

@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

小开

如果你主要对实现仅用于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;
}
小开

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

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


提交答案