Angular中的自定义双向绑定和@Input不匹配？

Question

我已经阅读了article 关于 Angular 中两种方式的绑定。
此外 - Angular 文档提供了访问内部组件属性的示例。

在它的父组件中：

 <name-child *ngFor="let name ..." [name]="name"></name-child>

其中[name] 指的是内部setter(!)：

 @Input()
 set name(name: string) {
    this._name =...;
  }

这很清楚。

但后来我看到了下面这个例子(here)：

<custom-counter [(counter)]="counterValue"></custom-counter>

counter 在内部组件中作为 GETTER 上的 @Input ！

    @Input()       // <--------     On a getter ??
    get counter()
    {
        return this.counterValue;
    }

    set counter(val)
    {
        this.counterValue = val;
        this.counterChange.emit(this.counterValue);
    }

问题

plnkr 中的代码确实按预期工作，但是 - 我不明白它如何与 getter 上的 @Input 一起工作！

我的意思是 - 父级应该将值设置为内部设置器。

我错过了什么？

PLNKR

Answer 1

您始终可以使用 Playground 来检查 typescript 在内部的作用

例如这段代码：

class MyClass {
    @Input()       // <--------     On a getter ??
    get counter()
    {
        return this.counterValue;
    }

    set counter(val)
    {
        this.counterValue = val;
        this.counterChange.emit(this.counterValue);
    }
}

将被翻译成

var MyClass = (function () {
    function MyClass() {
    }
    Object.defineProperty(MyClass.prototype, "counter", {
        get: function () {
            return this.counterValue;
        },
        set: function (val) {
            this.counterValue = val;
            this.counterChange.emit(this.counterValue);
        },
        enumerable: true,
        configurable: true
    });
    return MyClass;
}());
__decorate([
    Input() // <--------     On a getter ??
], MyClass.prototype, "counter", null);

如您所见，只有一个属性名称为 counter，它将使用 @Input 装饰器进行装饰。