我在多次实例化 Angular2 解析器时遇到问题。
这是我的功能模块声明(由路由器延迟加载):
const ROUTES: Route[] = [
{
path: '',
component: ScreenParentComponent,
children: [
{
path: '',
component: InnerScreenParentComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'urlA'
},
{
path: 'urlA',
component: ChildComponentA,
resolve: [ResolverA, ResolverB]
}
]
}
]
}
];
@NgModule({
providers: [
ResolverA,
ResolverB
],
declarations: [
InnerScreenParentComponent,
ChildComponentA
],
imports: [
SharedModule,
RouterModule.forChild(ROUTES)
]
})
export class MyFeatureModule {
}
这是相关解析器的代码(我们称之为 ResolverA):
import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs";
import {AuthHttp} from "angular2-jwt";
@Injectable()
export class ResolverA implements Resolve<IDataDto> {
private API_URL = '...';
private _reasons: IDataDto[];
constructor(private http: AuthHttp) {
console.log("Resource NEW");
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
console.log("Resource RESOLVE");
return this.http.get(this.API_URL)
.map(result => result.json())
.do(result => this._reasons = result);
}
get reasons(): IDataDto[] {
return this._reasons;
}
}
export interface IDataDto {
reasonCode: string,
description: string,
gainLossType: GainLossType
}
export type GainLossType = "GAIN" | "LOSS";
还有一个组件:
// All needed imports
@Component({
selector: 'componentA',
template: require('./componentA.template.html')
})
export class ComponentA implements OnInit {
constructor(private router: Router,
private timeResolver: TimeResolver,
private resolverA: ResolverA,
private messageService: MessageService) {
}
ngOnInit(): void {
// other UI initialization code
this.initData();
}
private initData() {
let reasons = this.resolverA.reasons; //UNDEFINED!
console.log("Reasons:", reasons);
}
}
问题是，此 ResolverA 被实例化两次(并且仅在一个实例中解析)。第二个实例(注入(inject)到组件中)具有未解析的数据。事实上，第二个实例根本不应该存在，解析器应该是单例的。
本例中的控制台输出:
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Resource NEW
Resource RESOLVE
Resource NEW //THIS SHOULDN'T BE HERE
Reasons: undefined
Reasons: undefined
在 Angular 2.1.2 中按预期工作，但在 Angular 2.2.4 中则不然。 typescript 版本:2.0.10
我的代码是否有问题(自 Angular 2.2 以来发生了变化)或者这被认为是 Angular 中的错误？
最佳答案
存在一个关于延迟加载模块中的提供程序被多次实例化的已知问题
关于Angular2解析器实例化多次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40930756/