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位于边栏中，所以我不想更改整个url-我只希望更改命名路由器（标签），但无法弄清楚{ {1}}功能。

这是我到目前为止所拥有的，在移动设备上效果很好：

navigate

以及相关的html：

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

重申一下-在平板电脑（768px）及更高版本上，如何仅更改<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>的命名路由器？

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

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

Answer 2

不确定这是否是您要的，但是通常，在这种情况下使用relative URL navigation会更清楚。

路由器在链接参数列表中支持类似目录的语法，以   帮助指导路线名称查找：

./或没有相对于当前水平的前斜线。

../在路由路径中上一层。

您可以将相对导航语法与祖先路径结合使用。如果   您必须导航到同级路线，可以使用../   习惯上一层楼，然后沿着同级路线走   路径。

要使用Router.navigate方法导航相对路径，您必须   提供ActivatedRoute以使路由器了解您的位置   在当前的路由树中。

在链接参数数组之后，添加一个带有relativeTo对象   属性设置为ActivatedRoute。然后，路由器计算   目标URL根据活动路线的位置。

是这样的：

  constructor(private activatedRoute: ActivatedRoute,
              private router: Router,
              private location: Location) {
  }

，然后在菜单激活处理程序中清除最后一条路线

  const url = this
    .router
    .createUrlTree(['../'], {relativeTo: this.activatedRoute})
    .toString();

  this.location.go(url);

转到同一级别的新子路由：

  const url = this
    .router
    .createUrlTree(['../', 'something-new-route'], {relativeTo: this.activatedRoute})
    .toString();

  this.location.go(url);

“新事物路由”也可以是变量（或URL参数）。

仅在命名路由上路由

2 个答案: