无法将“Route”或“ActivatedRouteSnapshot”注入“HttpInterceptor”

Question

代码的简化版本：

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor(
    private readonly router: Router,
    private readonly activatedRouteSnapshot: ActivatedRouteSnapshot,
    @Inject(AuthServiceFactory) private readonly authServiceFactory: ServiceFactoryBase<IAuthService>,
    @Inject(LoggingServiceFactory) private readonly loggingServiceFactory: ServiceFactoryBase<ILoggingService>) {
    console.log('router', router);
    console.log('activated-route-snapshot', activatedRouteSnapshot);
  }

None的那个可以解决。它失败并显示以下标准消息：

StaticInjectorError(AppModule)[InjectionToken HTTP_INTERCEPTORS -> ActivatedRouteSnapshot]: StaticInjectorError(Platform: core)[InjectionToken HTTP_INTERCEPTORS -> ActivatedRouteSnapshot]: NullInjectorError: No provider for ActivatedRouteSnapshot!

..将 RouterModule 导入应用程序的正确方法是什么？

P.S。我得到 SharedModule 而不是 AppModule 来导出所有我的的东西但不是 Angular 的：

@NgModule({
    declarations: any.concat(pipes),
    providers: any
        .concat(serviceFactories)
        .concat(guards)
        .concat(otherProviders)
        .concat([{
            provide: HTTP_INTERCEPTORS,
            useClass: JwtInterceptor,
            multi: true
        }]),
    exports: any.concat(pipes)
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: any
                .concat(serviceFactories)
                .concat(guards)
                .concat(otherProviders)
        };
    }
}

AppModule:

@NgModule({
  declarations: appComponents.concat(auxComponents),
  imports: [
    // theirs
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,

    // ours
    SharedModule,
    CoursesModule
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Answer 1

当您使用 ClassProvider 作为 HttpInterceptor 时，Angular 无法像编译模块中包含的提供程序那样编译提供程序依赖项作为代币本身。基本上，类型标记在运行时并不真正存在，并且 Angular 使用这些标记进行依赖注入——因为 ClassProvider 或 ValueProvider 是在运行时评估的，它们不会得到他们应得的适当 DI 治疗。

你只需要更明确一点：

    {
        provide: HTTP_INTERCEPTORS,
        useClass: JwtInterceptor,
        deps: [Router, ActivatedRoute],
        multi: true
    }

deps 数组中的标记将在创建时注入到组件中。这里有一件棘手的事情是 deps 必须与构造函数参数中的 order 相同。

此外，ActivatedRouteSnapshot 的提供商只是 ActivatedRoute。

您应该能够通过使用 @Inject() 装饰器来完成同样的事情，就像您对其他提供程序所做的那样——Angular 将在第一个匹配项的依赖关系树中向上移动并注入它（尽管我对此不是 100% 确定）。

无法将“Route”或“ActivatedRouteSnapshot”注入“HttpInterceptor”

Can't inject `Route` nor `ActivatedRouteSnapshot` into `HttpInterceptor`

angular

angular-router

angular-dependency-injection