路由器导航到子路由 - Angular 6答案

【问题标题】：Router navigate to child route - Angular 6路由器导航到子路由 - Angular 6
【发布时间】：2018-11-08 12:56:50
【问题描述】：

我已经这样定义了我的路线：

const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' },
    { path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

像这样：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(list:list)',
        pathMatch: 'full',
      },
      {
        path: 'list',
        outlet: 'list',
        component: ListPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage,
        canActivate: [AuthGuardService]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(list:list)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

我对如何使用组件中的路由器 .navigate() 方法或某些 html 元素中的 routerLink 导航到 ListPage 或 ProfilePage 很感兴趣。

我试过这样的

this.router.navigate(['tabs/profile']);

或

this.router.navigate(['profile']);

或

this.router.navigate(['tabs(profile:profile)']);

得到了这个错误：

错误：无法匹配任何路由。网址段：''

【问题讨论】：

标签： angular angular6 angular-router angular-routerlink

【解决方案1】：

试试：

this.router.navigate(['child component path'], {relativeTo: this.activatedRoute});

这解决了我的问题。快乐编码:)

【讨论】：

别忘了加import { ActivatedRoute } from '@angular/router';

【解决方案2】：

this.router.navigate(['/list'], {relativeTo: this.route});      //absolute
this.router.navigate(['./list'], {relativeTo: this.route});     //child
this.router.navigate(['../list'], {relativeTo: this.route});    //sibling
this.router.navigate(['../../list'], {relativeTo: this.route}); //parent
this.router.navigate(['tabs/list'], {relativeTo: this.route});
this.router.navigate(['/tabs/list'], {relativeTo: this.route});

你会发现here更多信息

【讨论】：

欢迎来到stackoverflow。除了您提供的答案之外，请考虑提供一个简短说明，说明为什么以及如何解决此问题。
没用。考虑添加有关每个选项的功能的详细信息。

【解决方案3】：

如果您想导航到list 路线，您需要让角度知道它是tabs 的子路线

this.router.navigate(['/tabs/list']); 或 this.router.navigate(['tabs','list']);

在路由器导航中，您需要将路由作为string 的数组传递，因此现在角度将为父tabs 找到并检查子路由，如果它什么都没有，它将导航到pathMatch: 'full'，如果不是它会导航到特定的子路线

在routerLink可以使用同一个数组来匹配路由

谢谢，编码愉快！！

【讨论】：

我不知道我做错了什么，但两个选项都显示相同的错误。 “错误：无法匹配任何路由。URL 段：'tabs'”
您正在正确使用延迟加载 - 当您尝试导航到 TabsPageModule 时，路线将为空并尝试查找路径，所以我在这里有疑问 - redirectTo: '/tabs/(offers:offers)' 这是什么意思因为我在这里没有看到任何名称为 offers 的路线，所以代码会混淆
刚刚编辑了代码，但是当我更改为 redirectTo: '/tabs/(list:list)' 这不起作用
只需将其设为/tabs/list 这将呈现ListPage 组件初始导航将起作用或使用/tabs 这将呈现TabsPage 组件 - 最后我不认为@987654336 @ routes 需要 pathMatch 删除并检查一次
在 path=" " 的子数组中绑定组件 ListPage 不要重定向到相同的 list 路由删除 redirect 并删除 pathMatch 并添加 component 所以现在如果只有“选项卡”会在路由为tabs 时同时呈现TabsPage 和ListPage 组件，希望这会起作用-并且在您的父重定向中只需将路由名称提及为“选项卡”，它将自动选择该路由

【解决方案4】：

在导航到特定出口时在routerLink 中提及outlets。

[routerLink]="['tabs/profile', {outlets: {'profile': ['profile'], 'list': ['none']}}]"

最终会在路线下方生成

http://localhost:4200/tabs/profile/(profile:profile//list:none)

【讨论】：

【解决方案5】：

这取决于您希望从哪个组件导航。

从 Tabs 到 ListPage：

this.router.navigate(['/list'], {relativeTo: this.route});

如果你从 ProfilePage 导航到 ListPage（它们是兄弟），那么你需要使用这个：

this.router.navigate(['../list'], {relativeTo: this.route});

在上面的代码中， route 是 ActivatedRoute 对象，因此它将启用从当前路由的相对导航。你可以像这样在构造函数中注入它：

constructor(private route: ActivatedRoute)

我曾经也遇到过同样的问题，并且尝试了所有方法，但没有任何效果。最后，Visual Studio Code 的 Intellisense 帮了我这个忙。希望它可以帮助某人。

【讨论】：

【解决方案6】：

我通过在 '' 和 'tabs' 路径下方添加配置文件路径找到了解决方案：

  {
    path: 'profile',
    redirectTo: '/tabs/(profile:profile)',
    pathMatch: 'full'
  }

现在我可以导航到个人资料

  this.router.navigate(['profile']);

我忘记在 tabs.router.module.ts 中添加此路径。因此，我被提及错误

【讨论】：