Friday, 25 January 2019

Routing on a named route only

I have a user-profile routing module that looks like this:

const userProfileRoutes: Routes = [
  {
    path: ':id/view',
    component: UserProfileViewComponent,
    resolve: { 
      user: UrlUserResolverService,
      posts: PostsAllResolverService
    },
    canActivate: [ AccessGuard ],
    children: [
      {
        path: 'posts',
        outlet: 'tabs',
        component: TabPostsViewComponent
      },
      {
        path: 'followers',
        outlet: 'tabs',
        component: TabFollowersFollowingViewComponent,
        resolve: { followers: UserFollowersResolverService }
      },
      {
        path: 'following',
        outlet: 'tabs',
        component: TabFollowersFollowingViewComponent,
        resolve: { following: UserFollowingResolverService }
      }
    ]
  },
  {
    path: ':id/notifications',
    component: UserProfileNotificationsComponent,
    resolve: { notifications: NotificationsResolverService },
    canActivate: [ AccessGuard ] 
  }
];

This all works fine when I'm on the mobile view of the app as navigating changes the url, as I'd expect.

But on tablet and above the user-profile-view appears in the sidebar, like so:

<div id="sidebar">
  <user-profile-view></user-profile-view>
</div>

So because the user-profile is in the sidebar I don't want the entire url to change - I only want the named router (tabs) to change but I can't figure out what to place in the navigate function.

Here's what I have so far, which works well for mobile:

goToChildRoute(route: string) {
  let queryParams = route === 'posts' ? { queryParams: null } : { queryParams: { id: this.user.pk } };
  this.router.navigate([`/user-profile/${this.user.pk}/view`, { outlets: { tabs: [route] } }], queryParams);
}

And the relevant html:

  <div class="tabs">
    <div *ngFor="let tab of tabs;" [id]="tab.route" class="tab" (click)="goToChildRoute(tab.route)">
      <p></p>
      <p></p>
    </div>
  </div>
  <router-outlet name="tabs"></router-outlet>

So to reiterate - how do I change only the named router of tabs when I'm on tablet (768px) and above?



from Routing on a named route only

No comments:

Post a Comment