angular - 使用 Getter 和 Setter 的 Angular2 组件输入上出现重复标识符错误

Question

我有一个 Angular 2 组件，它使用 @Input 类字段装饰器以及 getter 和 setter，如下所示:

import {Component, Input, Output, EventEmitter,FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/angular2';

@Component({
    selector: 'binding-test3',
    templateUrl: './components/binding-test/binding-test3.html',
    directives: [CORE_DIRECTIVES,FORM_DIRECTIVES]
})

export class BindingTest3 {

    @Input() value: string;
    @Output() valueChange:EventEmitter = new EventEmitter();

    private _value: string;

    get value() {
        console.log('getting value in BindingTest3: ',this._value);
        return this._value;
    }

    set value(value) {
        console.log('setting value in BindingTest3: ',value);
        this._value = value;
        this.valueChange.next(value);
    }
}

代码运行正确，但存在三个编译错误:

应用程序/组件/绑定(bind)测试/绑定(bind)测试3.ts(15,14):错误TS2300:重复的标识符“值”。 应用程序/组件/绑定(bind)测试/绑定(bind)测试3.ts(20,9):错误TS2300:重复的标识符“值”。 应用程序/组件/绑定(bind)测试/绑定(bind)测试3.ts(25,9):错误TS2300:重复的标识符“值”。

关于如何解决这个问题有什么想法吗？

Answer 1

将 @Input 与集合组合:

@Input() set value(value:string) { ... }

Attribute Directives 上有一个这样的例子开发者指南页面:

@Input() set defaultColor(colorName:string) {...}