Question

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

Answer 1

仅通过将ActivatedRoute放在构造函数参数中就可以注入它们。

constructor(
    private service: BaseService<DtoType>,
    protected activatedRoute: ActivatedRoute;
) {}

第二，您必须订阅this.activatedRoute.params，因为初始化组件后它可能会更改：

this.activatedRoute.params.pipe(switchMap(({id}) => this.service.findById(id)).Subscribe(...)

Answer 2

这是与Parent components gets empty Params from ActivatedRoute类似的问题。

ActivatedRoute的Angular文档指出（我的重点）：

包含有关与插座中加载的组件相关的路线的信息。

在Angular的GitHub存储库上还有一个issue of feature request，要求提供解决方案，声明（我的重点）：

使用针对某个组件的参数化路由时，只有该组件可以访问这些参数。

因此，您遇到了预期的行为。关于该问题的comment指出每个组件都有自己的ActivatedRoute（它不像其他注入的类那样作为单例工作）。

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

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

有关完整示例，请查看@brandonroberts在GitHub问题上提供的src/app.ts文件import pandas as pd data = [[1,'Joe', '2018', 5,7,9]] df = pd.DataFrame(data, columns = ['ID', 'Name', 'Year', 'FallScore', 'WinterScore', 'SpringScore']) print(df) ID Name Year FallScore WinterScore SpringScore 0 1 Joe 2018 5 7 9

Answer 3

要获取路由参数，请订阅activateRoute.params.subscribe（（data）=> {ur code}）这里的数据将包含参数。假设您的注册是路径：abc /：id 然后，参数将包含id属性。

如何使用Injector.get（ActivatedRoute）检索路线参数？

3 个答案: