Angular2目标特定路由器出口

我有一个应用程序，它有一个基本路由器插座，用作整个应用程序的基础。然后是一个子路由器出口，用户登录后使用该子路由器出口来显示由于单击基于基本路由器出口的导航链接而加载的任何组件。我希望在基本模板中单击导航链接时能够定位子路由器出口。

当我单击基本模板中的导航项时，它会加载基本路由器出口中的组件。这对我来说很有意义。我想知道如何单击基本模板中的导航项并在子路由器出口中加载所需的组件。

我找不到任何关于定位命名路由器出口的信息，就像我在 RC4 中所做的那样（我认为它是 RC4），当时我曾经能够执行以下操作：

[routerLink]="/childroute#secureRouterOutlet"

这是一个非常简单的插件，它模仿了当前的设置方式：plunkr https://plnkr.co/edit/YxidcgAJaNjlrQnINnmw?p=preview

我想知道如何单击基本模板中的导航项并在子路由器出口中加载所需的组件

您可以通过启用嵌套路由来实现这一点，您需要设置children属性于Routes。这里是doc https://angular.io/docs/ts/latest/api/router/index/Routes-type-alias.html.

以下是如何完成此操作，具体取决于您的 plunker 用例。

On src/app.ts指定您想要添加为子项的任何组件Routes配置。例如，添加Child2Component作为嵌套路由ChildComponent会像下面这样

export const ROUTES: Routes = [
    { 
        path: '', 
        component: HomeComponent 
    },
    { 
        path: 'child', 
        component: ChildComponent, 
        children : [
            { path: 'child2', component: Child2Component }  
        ]
    },
    { 
        path: 'home',      
        component: HomeComponent 
    }
];

在导航上，您需要添加链接Child2Component如下

<a [routerLink]="['/child', 'child2']">Go to Child - Child2</a>

现在，当您点击该链接时，ChildComponent将渲染Child2Component里面有模板router-outlet in ChildComponent

这里正在工作plunkr https://plnkr.co/edit/jQbJ9E?p=preview