Angular subscribing to two levels of activated route

Question

Below is my query, which only produces the artistID from the params using:

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

If however, I use:

this._subscription = this._activatedRoute.parent.parent.params.pipe( , I then get the albumID but not the artistID.

I require both for a query as seen with this.service.getArtist(params.albumID, params.ArtistID);

What is the best solution to fetch both levels for url params to merge into my query?

Could it be a case that the parent component needs to perform it's own query to get the albumID and make that available in a service for the child to use?

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

This is in the main routing module and imports an albums module. The albums module has it's own router-outlet for children.

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

Albums Landing Module

This is the album landing module which imports a child module for artists.

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

Do you mean "show us the routing"? If so, i've updated it. – Haven Apr 29 '20 at 16:48 — Haven, Apr 29 '20 at 16:48

score 0 · Answer 1 · answered Apr 30 '20 at 11:42

Use the combineLatest to combine the two routes:

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

Angular subscribing to two levels of activated route

1 Answers1