Question

我目前正在创建一个Angular4应用，它是在线游戏的用户界面。作为这个应用程序的一个功能，有一个电话，它包括一个主路由器插座和一个辅助路由器插座，负责显示一些提示。由于使用了命名插座，用户可以在主路线上导航，同时仍然显示辅助路线。

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

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

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

但是我没有成功将此功能集成到整个用户界面中，因为我无法在电话功能中填充指定的路由器插座，该功能现在包含主要插座和一些辅助插座。 / p>

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

这是一个抽象的情况仅代表单一功能分支（例如<router-outlet name="phone"><router-outlet>）：
http://plnkr.co/edit/o0DFop?p=preview

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

感谢。

Answer 1

您的插座名称不匹配，位于plunkr app.ts的第66行：

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

应该是：

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

以便它匹配路由配置（第95行）中的插座名称和路由器链接插座名称（第61行）。

路由到指定商店的指定商店 - Angular4

1 个答案: