angular - 角度订阅两个级别的激活路线

Question

以下是我的查询，它仅使用以下参数从参数中生成艺术家 ID：

this._subscription = this._activatedRoute.params.pipe(

但是，如果我使用：

this._subscription = this._activatedRoute.parent.parent.params.pipe(，然后我得到专辑 ID，但没有艺术家 ID。

我需要两个查询，如this.service.getArtist(params.albumID, params.ArtistID);

获取 url 参数的两个级别以合并到我的查询中的最佳解决方案是什么？

可能是父组件需要执行自己的查询来获取albumID并在服务中提供给子组件使用的情况吗？

getArtistData(){
    this._subscription = this._activatedRoute.params.pipe(
      tap(params => {
        this.album_id = params.albumID;
        this.artist_id = params.ArtistID;
      }),
      switchMap(params => {
        return this.service.getArtist(params.albumID, params.ArtistID);
      })
    ).subscribe(artist => {
      if (artist) {
        // Subscription
      } 
    });
  }

应用程序路由模块

这是在主路由模块中并导入一个相册模块。相册模块有它自己的儿童路由器插座。

  {
    path: ':albumID/albums',
    loadChildren: () => import('../components/albums-landing.module').then(mod => mod.AlbumsModule),
  },

相册登陆模块

这是为艺术家导入子模块的专辑登陆模块。

  const routes: Routes = [
      {
        path: '',
        component: AlbumsCompponent,
        children: [
            {
              path: 'artists/:artistID/editor',
              loadChildren: () => import('../artists/artists-editor/artists-editor.module').then(mod => mod.ArtistsModule),
            },
        ]
      }
    ]

Answer 1

使用 combineLatest 组合两条路线：

  constructor(private _route: ActivatedRoute) {
    this._subscription = combineLatest([this._route.parent.params, this._route.params])
      .pipe(switchMap(([{ albumID }, { artistID }) => this.service.getArtist(albumID, ArtistID)))
      .subscribe(artist => {
        if (artist) {
          // Subscription
        }
      });
  }