自定义双向绑定和@输入不匹配角？

Question

我读过一本关于双向绑定的https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html。

同时，角度文档提供了一个访问内部组件属性的示例。

在父组件中，它具有：

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

其中[name]引用内部setter(!)：

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

这很清楚。

但是，我看到了下面的示例https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html：

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

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

    @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

通过使用游乐场，您始终可以在内部检查类型记录。

例如，这段代码：

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

如您所见，只有一个带有名称计数器的属性，并且它将使用@Input装饰符进行修饰。