Javascript 自定义双向绑定和@Input在角度上不匹配？

我读过一篇关于双向装订的文章。 另外，角度文档提供了访问内部组件属性的示例

在父组件中，它具有：

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

这很清楚

但后来我看到了下面的例子：

问题:

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

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

我错过了什么

---

您可以使用

例如，此代码：

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 decorator进行装饰。

@yurzui所以我在哪个属性上设置它并不重要？编辑、测试、生成相同的代码—这样就不重要了。您可以将装饰器移动到setter，但只会创建一个属性，因此将进行装饰。顺便说一句，我在TS游乐场玩了很多，但我没有想到要了解装饰器及其在TS.TIL中的影响。

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

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

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