Question

我已经这样定义了路线：

f x ys = if p x then x : ys else ys

像这样：

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 {}方法或某些html元素中的.navigate()导航到ListPage或ProfilePage感兴趣。

我尝试过这样的事情

routerLink

或

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

或

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

并收到此错误：

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

Answer 1

尝试：

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

这解决了我的问题。编码愉快：）

Answer 2

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

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

在路由器导航中，您需要将路由传递为string的数组，因此现在角度将为父级tabs找到，并检查子级路由是否不存在，它将导航到{{1 }}，否则它将导航到特定的子路线

在pathMatch: 'full'中，您可以使用相同的数组来匹配路线

谢谢，祝您编程愉快！

Answer 3

导航到特定插座的outlets中的routerLink。

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

最终会在路线下方生成

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

Answer 4

我找到了解决方案，方法是在“''和“标签”路径下添加配置文件路径：

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

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

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

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

Answer 5

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

从标签页到列表页：

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 6

this.router.navigate（['/ list']，{relativeTo：this.route}）; this.router.navigate（['./ list']，{relativeTo：this.route}）; this。 router.navigate（['../ list']，{relativeTo：this.route}）; this.router.navigate（['../../ list']，{relativeTo：this.route}）; this .router.navigate（['tabs / list']，{relativeTo：this.route}）; this.router.navigate（['/ tabs / list']，{relativeTo：this.route}）; 尝试任何人希望这会对您有所帮助。

强文本

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

6 个答案: