Question

我试图在指定的路由器插座中同时打开两个子路由。这将允许我router outlet A始终填充内容特定组件，例如login。

第二个router outlet B将有一个可重用的组件，用于处理路由配置中给出的data {...}。（所以仍然取决于具体的路线）。

这意味着路线/login应使用FrameComponent作为布局框架，并将一个组件加载到router outlet view，将一个组件加载到router outlet control-strip。

我的FrameComponent布局目前如下所示：

<router-outlet name="view"></router-outlet>
<router-outlet name="control-strip"></router-outlet>

我的路由器配置如下：

...
{
    path: 'login',
    component: FrameComponent,
    canActivate: [ UIGuard, hasInternetConnection, authLoggedOutService ],
    data: {
        navigationBack: true
    },
    children: [
        {
            path: '**',
            component: LoginEmailComponent,
            outlet: 'view'
        },
        {
            path: '**',
            component: ControlStripComponent,
            outlet: 'control-strip'
        }
    ]
},
...

我面临的问题是路由器配置在第一次点击时停止，因此/login/**为真且ControlStripComponent永远不会被触及。

Answer 1

看起来您正在将子路线的概念与辅助（或辅助）路线的概念混合在一起。听起来你应该在这里使用辅助路线并且不是子路线。

这是导航到辅助路线所需的语法：

this.router.navigate([{outlets: { popup: ['messages']}}]);

或者一次导航到两条辅助路线：

this.router.navigate([{outlets: { view: ['routeA'], control-strip: ['routeB']}}]);

配置如下所示：

    {
        path: 'routeA',
        component: LoginEmailComponent,
        outlet: 'view'
    },
    {
        path: 'routeB',
        component: ControlStripComponent,
        outlet: 'control-strip'
    }

在Angular 2 +

1 个答案: