Angular - 模板中的错误导致无限循环答案

【问题标题】：Angular - error in template results in an infinite loopAngular - 模板中的错误导致无限循环
【发布时间】：2020-07-29 16:34:21
【问题描述】：

请考虑以下代码：

//our root app component
import {ChangeDetectionStrategy, Component, ErrorHandler, Injector, NgModule, ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {ToastModule, ToastsManager} from "ng2-toastr/ng2-toastr";

@Component({
  selector: 'my-app',
  template: `
    <div>
      name={{(test$|async).name}}
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App {
  test$: Observable<{name:string}> = null;

  constructor(toastr: ToastsManager, viewContainerRef: ViewContainerRef) {
    toastr.setRootViewContainerRef(viewContainerRef);
  }
}

export class CustomErrorHandler extends ErrorHandler {
  constructor(private injector: Injector) { super(); }
  handleError(err: any): void {
    super.handleError(err);
    this.injector.get(ToastsManager).error(err.message);
  }
}

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ToastModule.forRoot() ],
  declarations: [ App ],
  bootstrap: [ App ],
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler, deps: [Injector] }
  ]
})
export class AppModule {}

也可作为 Plunker here.

组件模板中故意触发错误（test 未定义）。自定义错误处理程序启动，记录错误并尝试弹出错误 toast。不仅吐司不会弹出，而且应用程序也会不断地记录原始错误。稍微挖掘一下似乎表明这是由于反复调用烤面包机的 setTimeout 函数引起的。我尝试过使用不同的烤面包机库做类似的事情，但结果相同。

预期的行为是 toast 弹出一次，错误只记录一次。

知道如何实现这一目标吗？

【问题讨论】：

错误处理程序不会产生任何错误。然而，它似乎触发了新一轮的变更检测，从而导致无限循环。

标签： angular

【解决方案1】：

在handleError()末尾抛出错误。

来源：https://github.com/scttcper/ngx-toastr/issues/564#issuecomment-419910273

这不是 ngx-toastr 的问题。

发生的情况是，如果出现模板错误并且您已经“处理”了错误，更改检测将继续运行一遍又一遍导致无限循环。您需要在函数结束。

但是，由于未处理的 http 错误（以及其他较小的错误可以很容易地处理）也会在最后抛出错误并且会导致变更检测停止运行。诀窍是只扔一个最后的错误是您无法处理的事情或应该导致更改检测停止运行（如模板错误）

【讨论】：

我找这个很久了。