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

在 Angular 内一次激活多条路线 2+

Activate multiple routes at once in Angular 2+

angular-routing

angular