开始一个新项目,我带了一些我的服务。
这些服务在我上一个项目中运作良好,似乎没有任何循环依赖。
在我的新项目中,我需要一个AuthGuard,它也会注入UserService。一旦我将UserService添加到AuthGuard的构造函数中,Angular就无法将UserService解析为我的其他服务中的依赖项。 一切正常,没有注入AuthGuard。
由于这似乎不仅发生在UserService上,而且发生在AuthService上,我猜测我的问题不是来自服务,而是来自提供它们的方式。
app.module.ts
import { App } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';
import {UserService} from "./services/user.service";
import {DefaultGuard} from "./pages/default.guard";
import {AuthService} from "./services/auth.service";
import {TokenService} from "./services/token.service";
import {Api} from "./services/api.service";
// Application wide providers
const APP_PROVIDERS = [
AppState,
GlobalState,
UserService,
DefaultGuard,
AuthService,
TokenService,
Api
];
@NgModule({
bootstrap: [App],
declarations: [
App,
],
entryComponents: [
],
imports: [ // import Angular's modules
BrowserModule,
HttpModule,
RouterModule,
FormsModule,
ReactiveFormsModule,
NgaModule.forRoot(),
NgbModule.forRoot(),
PagesModule,
routing
],
providers: [ // expose our Services and Providers into Angular's dependency injection
APP_PROVIDERS
]
})
export class AppModule {
constructor(public appState: AppState) {
}
}
pages.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { routing } from './pages.routing';
import { NgaModule } from '../theme/nga.module';
import { AppTranslationModule } from '../app.translation.module';
import { Pages } from './pages.component';
@NgModule({
imports: [CommonModule, AppTranslationModule, NgaModule, routing],
declarations: [Pages],
})
export class PagesModule {
}
AuthGuard default.guard.ts 用于属于pages.module.ts的路由器
import {Injectable, Inject} from "@angular/core";
import {CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {UserService} from "../services/user.service";
@Injectable()
export class DefaultGuard implements CanActivate {
constructor(
private router: Router,
public userService: UserService
) {}
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (!this.userService.isAdminUser()) {
this.router.navigate(['login']);
return false;
}
return true;
}
}
我的服务依赖:
user.service.ts
constructor(
private http: Http,
) {
}
api.service.ts
constructor(
private http: Http,
private auth: AuthService,
) {
}
auth.service.ts
constructor(
public userService: UserService,
private tokenService: TokenService,
private http: Http,
) {}
token.service.ts
constructor(
public userService: UserService
) {
}
所以回顾一下:在将UserService注入DefaultGuard之前,一切正常。 将UserService注入DefaultGuard会导致TokenService中的依赖项解决错误。 将AuthService注入DefaultGuard会导致ApiService中的依赖性解决错误,等等。
关于什么错误的想法在这里错了?
更新 因此,似乎导入和/或注入服务的顺序在此问题中起作用。虽然我不确定究竟是怎么回事。
答案 0 :(得分:1)
我找到了解决我特定问题的方法:
整个DI混乱是由Http
注入UserService
引起的。因此,我将UserService
拆分为CurrentUserService
,只关注存储当前用户(这是AuthService
所需的内容等)和UserService
使用Http
1}}发布并从BE获取用户。
这显然是一个更好,更分散的服务组织,虽然我仍然不明白究竟是什么导致了这个问题(毕竟它在我的上一个项目中有效)。
值得一提的是,我正在使用ng2-admin template来构建应用。也许在后台某处有其他依赖项。