路由器导航到子路线-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)']);

并收到此错误:

推荐答案

我找到了解决方案，方法是在''和'tabs'路径下面添加配置文件路径:

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

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

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

Now I am able to navigate to profile with

  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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！