如何使用 Injector.get(ActivatedRoute) 检索路由参数? [英] How to retrieve a route param using Injector.get(ActivatedRoute)?

问题描述

我是 Angular 的新手.我的目标是拥有一个 BaseDetailComponent，它可以通过详细信息"组件(那些显示单个数据对象的字段)进行扩展.由于父类的构造函数将接收一个服务实例和其他参数，我不能在构造函数中使用正常的依赖注入.因此，我需要在 BaseDetailComponent 中手动注入应用程序注入器.我尝试了下面的代码.有一个 InjectorManager，它的注入器由全局 AppModule 设置.然后 BaseDetailComponent 检索 InjectorManager 的注入器并使用它来获取应用程序的 ActivatedRoute 实例.但是，由于某种原因，activatedRoute.snapshot.params.id 是未定义的.这是我的问题.我需要访问普通构造函数依赖注入不可用的类上的路由参数.

I'm new to Angular. My goal is to have a BaseDetailComponent which can be extended by "detail" components (those which show a single data object's fields). Since the parent class' constructor will receive a service instance and other params, I can't use normal dependency injection in the constructor. Therefore, I need to manually inject the application injector in BaseDetailComponent. I tried the code below. There is an InjectorManager, which has its injector set by the global AppModule. Then BaseDetailComponent retrieves InjectorManager's injector and uses it to get the app's ActivatedRoute instance. But, for some reason, activatedRoute.snapshot.params.id is undefined. And this is my issue. I need to access route params on a class where ordinary constructor dependency injection is unavailable.

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(...);
  }
}

推荐答案

This is a similar question as Parent components gets empty Params from ActivatedRoute.

This is a similar question as Parent components gets empty Params from ActivatedRoute.

ActivatedRoute 的 Angular 文档指出(我的重点):

The Angular documentation for ActivatedRoute states (my emphasis):

包含有关关联组件加载到出口中的路由的信息.

Contains the information about a route associated with a component loaded in an outlet.

Angular 的 GitHub 存储库上还有一个功能请求问题，要求提供解决方案，指出(我的重点):

There is also an issue of feature request on Angular's GitHub repo asking for a solution, that states (my emphasis):

当使用以组件为目标的参数化路由时，只有该组件可以访问这些参数.

When using a parametrized route which targets a component, only this component can access those parameters.

因此，您遇到了预期的行为.关于该问题的 评论 指出每个组件都收到自己的 ActivatedRoute (它不像其他注入类那样作为单例工作).

Thus, you are encountering an expected behavior. A comment on that issue states that each component receives its own ActivatedRoute (it does not work as singleton like other injected classes).

在同一 GitHub 问题上，建议的解决方案是注入 Router 并检查NavigationEnd 事件:

On that same GitHub issue, the proposed solution is to inject a Router and check for the NavigationEnd events:

router.events.filter(e => e instanceof NavigationEnd).forEach(() => {
  // inspect the state on router.routerState
})

有关完整示例，请检查 @ 提供的此 plunkr 上的文件 src/app.tsBrandonroberts 在 GitHub 问题上:http://plnkr.co/edit/pHd89K?p=预览

For a complete example check the file src/app.ts on this plunkr provided by @brandonroberts on the GitHub issue: http://plnkr.co/edit/pHd89K?p=preview

这篇关于如何使用 Injector.get(ActivatedRoute) 检索路由参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！