我如何在Angular中去掉变更检测并阻止一个简单的类变量进行渲染?

Question

我做了一个非常简单的演示应用程序来解释我到底想做什么。

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
a=1
b=2

increase(){
this.a++
this.b++
}
}

模板:

<p>{{ a }}</p>
<p>{{ b }}</p>
<button type="button" (click)="increase()">Increase</button>

我如何才能实现它，当我点击增加按钮显示"变量"改变，但"变量";不是。我是说就在显示屏上…

Answer 1

将b设为私有，并为模板绑定使用不同的变量bDisplay。然后，您可以跟踪b的值，并在需要时通过更新bDisplay来更新视图。

除此之外，我看不出任何解决办法。angular的目标是保持模型和视图的同步，所以如果绑定值发生了变化，你就无法回避视图的更新。

在你的例子中，实际上有一种方法，不更新b在视图上的第一个按钮点击(但它会弥补它在第二次点击):使用ChangeDetectionStrategy。并在setTimeout:

中增加b的值

increase(): void {
this.a++;
setTimeout(() => {
this.b++;
});
}

a将在视图中更新，因为单击触发一个更改检测周期，并标记要检查更改的组件。之后，setTimeout将运行，这将触发一个新的CD循环，但不会标记要检查的组件，因此视图中不会更新b。但随着下一次点击，a将再次更新，b将在视图中更新为第一次点击的值。

Answer 2

slim说得对。你基本上有两个选择。一个是改变他提到的变更检测策略。另一个是在angular之外运行。

变更检测策略OnPush

使用OnPush代替默认的变更检测策略，如下所示:

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
/* ... */
increase() {
this.a++
this._ngZone.runOutsideAngular(() => {
setTimeout(() => {
this.b++;
});
})
}
}

NgZone

或者(如果你不想切换到OnPush)，你可以在angular之外运行它:

constructor(private _ngZone: NgZone) {}
increase() {
this.a++
this._ngZone.runOutsideAngular(() => {
setTimeout(() => {
this.b++;
});
})
}

这是一个关于Stackblitz的例子。