在 Angular 2+ 中一次激活多个路由

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'
    }