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

Question

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

作为一个独立的，电话功能非常好用。
整个应用的结构如下：

## 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

整个应用的路由是：

## 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.component.html ##
<router-outlet><router-outlet>
<router-outlet name='hint'><router-outlet>
<div>...graphic content..</div>

主要思想是每个功能都有自己的路由器插座，以便我们可以在需要时同时显示一些功能。

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

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

这是一个抽象的情况。
仅代表一个单个功能分支（例如<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 app.ts 的第 66 行：

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

应该是：

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

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