我是Angular的新手。我的目标是拥有一个可由“详细”组件(显示单个数据对象的字段的组件)扩展的BaseDetailComponent。由于父类的构造函数将接收服务实例和其他参数,因此无法在构造函数中使用普通的依赖项注入。因此,我需要在BaseDetailComponent中手动注入应用程序注入器。我尝试了下面的代码。有一个InjectorManager,其注射器由全局AppModule设置。然后,BaseDetailComponent检索InjectorManager的注入器,并使用它来获取应用程序的ActivatedRoute实例。但是,由于某种原因,activateRoute.snapshot.params.id未定义。这是我的问题。我需要在普通构造函数依赖项注入不可用的类上访问路由参数。
export class InjectorManager {
private static _injector: Injector;
static get injector(): Injector {
return this._injector;
}
static set injector(value: Injector) {
this._injector = value;
}
}
export class AppModule {
constructor(
injector: Injector
) {
InjectorManager.injector = injector;
}
}
@Component({template: ''})
export class BaseDetailComponent {
protected activatedRoute: ActivatedRoute;
constructor(
private service: BaseService<DtoType>
) {
this.activatedRoute = InjectorManager.injector.get(ActivatedRoute);
}
ngOnInit() {
this.service.findById(this.activatedRoute.snapshot.params.id)
.subscribe(...);
}
}
这是一个类似的问题,因为父组件从ActivatedRoute获取空的Params。
ActivateRoute状态的Angular文档(我的重点是):
包含有关与插座中加载的组件关联的路线的信息。
Angular的GitHub存储库上还有一个功能请求问题,要求寻求解决方案,声明(我强调):
当使用针对某个组件的参数化路由时,只有该组件才能访问那些参数。
因此,您遇到了预期的行为。关于该问题的评论指出,每个组件都收到其自己的ActivatedRoute(它不像其他注入的类那样作为单例工作)。
在同一个GitHub问题上,建议的解决方案是注入路由器并检查NavigationEnd
事件:
router.events.filter(e => e instanceof NavigationEnd).forEach(() => {
// inspect the state on router.routerState
})
有关完整示例,请检查@brandonroberts在GitHub问题上src/app.ts
提供的此plunkr上的文件:http : //plnkr.co/edit/pHd89K?p=preview
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句