angular - 路由器导航到子路由 - 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

尝试:

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

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