注入ActivatedRoute给出循环依赖错误

时间:2019-06-13 14:52:58

标签: angular dependency-injection angular-activatedroute

我正在尝试在应用程序根范围内的服务中使用ActivatedRoute,但是遇到了我不了解且不知道如何解决的循环依赖错误。

在我的应用程序中,我有一项服务可以从顶级路由参数获取社区。
该服务在我的应用程序中的多个组件和其他服务中使用。
当我在构造函数中注入ActivatedRoute时,我得到

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

当我改为注入Injector iteslf,然后在构造函数中获取ActivatedRoute时,出现递归错误。 当我稍后在某个方法中获得ActivatedRoute时,它确实可以按预期工作。

@Injectable()
export class CommunityService {

    constructor(
        private injector: Injector
        // private router: ActivatedRoute => Cyclic dependency
    ) {
        // const router = this.injector.get(ActivatedRoute); => InternalError: "too much recursion"
    }

    public getCommunity(): Community {
        const router = this.injector.get(ActivatedRoute); // this should not be needed
        const communityCode = router.snapshot.paramMap.get('community');
        return getCommunityByCode(communityCode);
    }
}

已经有类似的问题,但它们与HttpInterceptors有关。这是一项常规服务。

在为@Alex创建Stackblitz时,我意识到我们在APP_INITIALIZER时间提供了社区服务。这是失踪的一块。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { ContentService } from '@common/services/content.service';

export function loadContent(content: ContentService) {
    return () => content.load();
}

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ { provide: APP_INITIALIZER, useFactory: loadContent, deps: [ContentService], multi: true }],
})
export class AppModule { }

2 个答案:

答案 0 :(得分:1)

尝试删除private injector: Injector并保留private router: ActivatedRoute并在需要的地方使用router调用this.router变量。如果仍然无法解决问题,我将需要在stackblitz或其他地方使用该代码,以便更深入地了解您的代码

答案 1 :(得分:0)

在APP_INITIALIZER时间提供服务时,尚未初始化所有角度服务。但是,ContentService构造函数希望插入初始化的ActivatedRoute。这导致循环依赖性。

providers: [ { provide: APP_INITIALIZER, useFactory: loadContent, deps: [ContentService], multi: true }],

像其他服务一样提供该服务时,情况不再如此。

providers: [ ContentService ]