路由器导航到子路由 - Angular 6 [英] Router navigate to child route - Angular 6

问题描述

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

I've defined my routes like this:

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 感兴趣.

I am interested how I can navigate to ListPage or ProfilePage using router .navigate() method in component or routerLink in some html element.

我试过这样的事情

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

或

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

或

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

并收到此错误:

错误:无法匹配任何路由.网址段:''

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

推荐答案

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

I found solution by adding profile path below '' and 'tabs' path:

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

现在我可以使用

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

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

I forgot to add this path in tabs.router.module.ts. Because of that I was getting mentioned error

这篇关于路由器导航到子路由 - Angular 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！