Angular: 在构造函数中注入路由器出错

Question

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

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

这里是项目link。 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 class 而不是 Angular 的 ErrorHandler.

假设路由器需要一个 MyErrorHandler 服务的实例来创建它自己的实例。所以注入器将寻找 MyErrorHandler 的实例来创建 Router.

的实例

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

TL;DR;: Angular 为了创建 Router 的实例需要 MyErrorHandler 的实例。为了创建 MyErrorHandler 的实例，它需要 Router 的实例。这会造成 MyErrorHandler 依赖于 Router 而 Router 依赖于 MyErrorHandler 从而产生循环依赖的情况。

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

Angular: 在构造函数中注入路由器出错

Angular: Injecting router in constructor giving error

inject

angular