Angular:在构造函数中注入(inject)路由器给出错误

Question

我正在尝试创建一个全局错误处理组件，为此，我提供了自定义 ErrorHandler 类。我想通过 error.service.ts 中的构造函数注入(inject) Router，以便我可以导航到错误组件，但它失败并出现以下错误。

compiler.js:18429 Uncaught Error: Provider parse errors: Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

这是项目的链接。 https://stackblitz.com/edit/angular-q56xm8

请检查 error.service.ts，如果我取消第一个实现的注释，它会起作用，但我想使用以下方法使其起作用。

Answer 1

让我们尝试通过注册自定义错误处理程序时内部发生的情况示例来理解这一点。

要注册错误处理程序，您可以执行以下操作:

class MyErrorHandler implements ErrorHandler {
  handleError(error) {
    // do something with the exception
  }
}

@NgModule({
  providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
})
class MyModule {}

现在它所做的是，它现在使用您的 MyErrorHAndler 类而不是 Angular 的 ErrorHandler .

假设对于 Router，它需要一个 MyErrorHandler 服务的实例来创建它自己的实例。因此，注入(inject)器将查找 MyErrorHandler 实例来创建 Router 实例。

注入(inject)器没有 MyErrorHandler 服务的实例(而不是常规的 ErrorHandler)，因此它将尝试创建一个实例，以便将其提供给路由器。但是，一旦它尝试创建 MyErrorHandler 的实例，它就会在 MyErrorHandler 的构造函数中看到 Router 。因此，它将检查可能注入(inject)到 MyErrorHandler 的 constructor 中的 Router 实例。但它没有找到一个，因为 Router 是它首先尝试实例化的东西。

TL;DR;: 为了创建 Router 实例，Angular 需要 MyErrorHandler 实例。为了创建 MyErrorHandler 实例，它需要一个 Router 实例。这会造成一种情况，即 MyErrorHandler 依赖于 Router，而 Router 又依赖于 MyErrorHandler，从而创建循环依赖。

修复:由于您已经自己完成了此操作，因此修复方法是使用 Injector。当您使用它时，为了创建 MyErrorHandler 实例，Angular 将不再需要在其中注入(inject) Router 实例。因此，在这种情况下不会出现任何循环依赖的情况。