Angular подписка на два уровня активированного маршрута - PullRequest
Новая
       26

Angular подписка на два уровня активированного маршрута

0 голосов
/ 29 апреля 2020

Ниже приведен мой запрос, который генерирует ArtistID из параметров, используя:

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

Если, однако, я использую:

this._subscription = this._activatedRoute.parent.parent.params.pipe(, я затем получите идентификатор альбома, но не идентификатор исполнителя.

Я запрашиваю оба для запроса, как видно с 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
      } 
    });
  }

app-routing.module

Он находится в основном модуле маршрутизации и импортирует модуль альбомов. Модуль альбомов имеет собственный роутер-выход для детей. 

  {
    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),
            },
        ]
      }
    ]

1 Ответ

0 голосов
/ 30 апреля 2020

Используйте комбайнПоследний, чтобы объединить два маршрута: 

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