首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用Injector.get(ActivatedRoute)检索路由参数?

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

Stack Overflow用户
提问于 2019-04-15 18:31:51
回答 2查看 1.2K关注 0票数 3

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

代码语言:javascript
复制
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(...);
  }
}
EN

回答 2

Stack Overflow用户

发布于 2019-04-15 18:46:56

首先,你可以通过将ActivatedRoute放在构造函数参数中来注入它。

代码语言:javascript
复制
constructor(
    private service: BaseService<DtoType>,
    protected activatedRoute: ActivatedRoute;
) {}

其次,您必须订阅this.activatedRoute.params,因为它可以在组件初始化后更改:

代码语言:javascript
复制
this.activatedRoute.params.pipe(switchMap(({id}) => this.service.findById(id)).Subscribe(...)
票数 2
EN

Stack Overflow用户

发布于 2019-04-15 18:49:33

要在activatedRoute.params.subscribe(( data ) => {ur code})上获取路由参数订阅,这里的数据将包含参数。假设您的注册是path : abc/:id,那么params将包含id属性。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55687242

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档