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

Question

我这样定义我的路线：

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)']);

并收到此错误：

Error: Cannot match any routes. URL Segment: ''

Answer 1

如果您想导航到 list 路线，您需要让 angular 知道它是 tabs

的子路线

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

在路由器导航中，您需要将路由作为 string 的数组传递，所以现在 angular 将查找父 tabs 并检查子路由（如果没有）将导航到 pathMatch: 'full' 如果不是它将导航到特定的子路由

在routerLink中可以使用相同的数组来匹配路由

谢谢，编码愉快！！

Answer 2

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

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

最终会在路由

下方生成

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

Answer 3

尝试：

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

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

Answer 4

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

从选项卡到列表页：

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 帮我解决了这个问题。希望对大家有帮助。

Answer 5

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

您会找到更多信息

Answer 6

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

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

现在我可以使用

导航到个人资料

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

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

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

Router navigate to child route - Angular 6

angular

angular-router

angular6

angular-routerlink