12

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

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()在组件或routerLink某些 html 元素中使用路由器方法导航到 ListPage 或 ProfilePage 很感兴趣。

我尝试过这样的事情

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

或者

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

或者

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

并得到这个错误：

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

4

6 回答 6

27

尝试：

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

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

于 2018-12-03T09:01:50.593 回答
12 
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});

你会在这里找到更多信息

于 2019-10-11T14:44:30.913 回答
8

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

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

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

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

谢谢，快乐编码！

于 2018-11-08T13:06:45.737 回答
1

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

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

最终将生成以下路线

http://localhost:4200/tabs/profile/(profile:profile//list:none)
于 2018-11-08T13:10:13.333 回答
1

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

从 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 帮了我这个忙。希望它可以帮助某人。

于 2019-06-08T19:44:55.403 回答
1

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

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

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

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

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

于 2019-10-30T15:44:03.477 回答