从命名插座路由到命名插座 - Angular4

Question

我目前正在创建一个 Angular4 应用程序，这是一个 UI 在线游戏。作为这个应用程序的一个功能，有一个phone，它由一个主路由器出口和一个辅助路由器出口组成，负责显示一些提示。由于使用了named outlet，用户可以在主路线上导航，而辅助路线仍然显示。

作为独立的，phone 功能非常有用。
整个应用程序的结构如下：

## root.component.html ##
<router-outlet><router-outlet>
<router-outlet name="phone"><router-outlet> // will load phone.component
<router-outlet name="other-feature-1"><router-outlet> // will load feature.component

整个app的路由是：

## routes.module.ts ##
const AppRoutes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            ...
        ]
    },
    {
        path: '',
        component: PhoneComponent,
        outlet: 'phone',
        children: [
            {
                ... non-outlet children
            },
            {
                path: '',
                component: HintComponent,
                outlet: 'hint'
                children: [
                    ...
                ]
            },
        ]
    },
    {
        path: '',
        component: FeatureComponent,
        outlet: 'other-feature',
        children: [
        ...
        ]
    }
];

phone 组件内容：

## phone.component.html ##
<router-outlet><router-outlet>
<router-outlet name='hint'><router-outlet>
<div>...graphic content..</div>

主要思想是每个功能都有自己的路由器出口，这样我们就可以在需要时同时显示一些功能。

但是我没有成功地将此功能集成到整个 UI 中，因为我无法在 phone 功能中填充命名路由器插座，该功能现在包含一个主要插座和一些辅助插座。

问题是:
如何从辅助插座填充辅助路由器插座？

这是对这种情况的抽象描述。
只代表一个单一特征分支（例如<router-outlet name="phone"><router-outlet>）：
http://plnkr.co/edit/o0DFop?p=preview

我设法从父命名出口导航到子主要出口（使用 this.router.navigate([{outlets: {'phone': 'non-outlet-path'}}]) 但不是从父命名出口导航到子命名出口。
请看上面给出的plunk

谢谢。

Answer 1

你的出口名称不匹配，在 plunkr 的第 66 行 app.ts:

<router-outlet name="aux-nested"></router-outlet>

应该是：

<router-outlet name="nested"></router-outlet>

使其匹配路由配置中的出口名称（第 95 行）和 routerlink 出口名称（第 61 行）。

从命名插座路由到命名插座 - Angular4

routing to a named outlet from named outlet - Angular4

router

angular