如何使用Injector.get(ActivatedRoute)检索路线参数?

卡洛斯

我是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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章