Angular 2，带有setter的@Input与没有setter的@Input的行为有什么不同？

Question

我想知道是否有人可以详细说明这一点。 是否@Input()与二传手VS使用@Input()没有二传手表现不同的问候变化检测？

例如：

@Input() something: SomeType; 

航班吗

private _something;

@Input() set something(something: SomeType ) {
  this._something = something;
}

get something(): SomeType {
  return this._something;
}

明显的区别是setter / getter允许@Input()带来一些额外的逻辑。 但这是否会以不同于我在没有setter的情况下使用@Input()方式影响更改检测？

Answer 1

对于角度不是很多变化。 不会设置输入或不会更频繁地调用setter。 然而，有一个警告，其中设置器内部有更多逻辑，可以触发另一个变化检测。 如果你有，angular将抛出已知错误（仅在开发模式下）

检查后表情发生了变化。

因此，变化检测器的行为不同，但可能会出现问题，具体取决于您在设置器中放置的额外逻辑

Answer 2

从angular的角度来看，唯一的区别是你有机会挂钩那些@Input()的get / set函数。

从Javascripts视图来看，第一个将是“just”一个属性，第二个将使用Object.defineProperty 。

plunker： https ：//plnkr.co/edit/1koamZCvyG5YAIPNB73r ？ p = preview

用setter编译代码：

Object.defineProperty(AppComponent.prototype, "test1", {
    get: function () { return this._test1; },
    set: function (val) {
        console.log('test1 was set!');
        this._test1 = val;
    },
    enumerable: true,
    configurable: true
});
__decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
    __metadata('design:type', Object), 
    __metadata('design:paramtypes', [Object]) /* difference? */
], AppComponent.prototype, "test1", null);

编译代码与out setter：

__decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
    __metadata('design:type', Object)
], AppComponent.prototype, "test2", void 0);

都使用angular-cli ： ng build编译。