Question

我想知道是否有人可以详细说明这一点。带有setter的@Input()与使用@Input()而没有setter的@Input() something: SomeType;在更改检测方面的行为有何不同？

例如：

private _something;

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

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

-vs -

@Input()

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

Answer 1

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

检查后表情发生了变化。

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

Answer 2

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

从Javascripts视图，首先是“只是”一个属性，第二个将使用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);

带有setter的编译代码：

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

使用angular-cli编译：{{1}}。

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

2 个答案: