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

我定义了这样的路线：

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)']);

得到了这个错误：

错误：无法匹配任何路由。URL段：">

尝试：

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

这解决了我的问题。快乐编码：(

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});

你可以在这里找到更多信息

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

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

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

在routerLink中，您可以使用相同的阵列来匹配路线

谢谢，编码快乐！！

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

从选项卡到列表页：

this.router.navigate(['/list'], {relativeTo: this.route});

如果您正在从ProfilePage导航到ListPage(它们是同级页面(，那么您需要使用以下内容：

this.router.navigate(['../list'], {relativeTo: this.route});

在上面的代码中，route是ActivatedRoute对象，因此它将启用从当前路线的相对导航。您可以将其注入构造函数中，如下所示：

constructor(private route: ActivatedRoute)

我也曾经遇到过同样的问题，尝试过所有的方法，但都没有成功。最后，VisualStudioCode的Intellisense帮助了我。希望它能帮助到别人。

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

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

最终将生成低于路线的

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

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

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

现在我可以使用导航到配置文件

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

我忘了在tabs.router.module.ts中添加此路径。正因为如此，我才提到错误

相关内容

最新更新

热门标签：