本文介绍了显示嵌套路由器中的组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想路由到配置"路由器,该路由器嵌套2个插座,但是我无法找出正确的方法.
I want to route to "config" router, which is nested 2 outlets deep but I'm unable to figure out the correct way to do so.
<router> <router name="main"> <router name="config"> </router> </router> </router>在我的routing.ts中,我创建了两种到达组件的方法:
In my routing.ts, I created 2 ways to reach the component:
export const routes: Routes = [ { // Entrypoint. path: 'Foo', component: FooComponent, canActivate: [IsServerOnlineGuard], children: [ path: 'Bar', component: BarComponent, outlet: 'main', children: [ { path: 'Smtp', component: smtpComponent, outlet: 'config' } // registered as a child ], path: 'Smtp', component: smtpComponent, outlet: 'config' }, // registered under the "main" component }, ] }, { path: '', pathMatch: 'full', redirectTo: 'CSI' }, { path: '**', redirectTo: 'CSI' }, ];我尝试了两种导航方式.
I tried navigating there in 2 ways.
public RouteToConfigOutlet(componentName: string) { this._router.navigate([`/(main:BarComponent)/`, { outlets: { config: ['Smtp'] } }]); } public RouteToConfigOutlet(componentName: string) { this._router.navigate([``, { outlets: { main: ['BarComponent'], config: ['Smtp'] } }]); }A,我无法显示我的组件,并试图找到到达该组件的正确方法.
Alas I'm unable to get my component to show up and am trying to find the correct way to get there.
推荐答案我在此网站. 正确的路由方式是:
I found the answer on this website. The correct way of routing is:
router.navigate( [{ outlets: { 'main': ['BarComponent', { outlets: { 'config': ['smtpComponent'] } } ] } }]);更多推荐
显示嵌套路由器中的组件
发布评论