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