仅在命名路由上路由

Question

我有一个如下所示的user-profile路由模块:

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

当我在应用程序的移动视图中导航更改网址时,这一切都正常,正如我所期望的那样.

但在平板电脑及以上user-profile-view,侧边栏中显示,如下所示:

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

所以,因为user-profile在侧边栏中我不希望整个网址发生变化 - 我只想改变命名的路由器(标签),但我无法弄清楚要在navigate功能中放置什么.

这是我到目前为止所做的,适用于移动设备:

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

和相关的HTML:

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

所以重申一下 - 如何更改tabs我在平板电脑(768px)及以上时的命名路由器？

Answer 1

我不确定我是否得到了这个问题，但也许你可以这样做：

<div *ngFor="let tab of tabs;" [id]="getTabRoute(tab)" class="tab" (click)="onTabClick(tab)">
  <p>{{ tab.count }}</p>
  <p>{{ tab.title }}</p>
</div>

onTabClick(tab: Tab) {
  const route = this.getTabRoute(tab);

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

getTabRoute(tab: Tab) {
  return window.screen.width > 768 ? tab.tabletRoute : tab.mobileRoute;
}

当然，您需要修改选项卡数组，以便每个选项卡都包含适用于平板电脑和移动设备的单独路线。希望有帮助。