angular2 目标特定路由器插座答案

【问题标题】：angular2 target specific router-outletangular2 目标特定路由器插座
【发布时间】：2017-03-21 11:35:59
【问题描述】：

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

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

当我以前能够做类似的事情时，我找不到任何关于定位命名路由器插座的信息，就像我可以在 RC4（我认为是 RC4）中做的那样：

[routerLink]="/childroute#secureRouterOutlet"

这是一个非常简单的 plunker，它模仿了当前的设置方式：plunkr

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

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

您可以通过启用嵌套路由来实现这一点，您需要在Routes 上设置children 属性。这是doc。

这是如何完成的，具体到您来自 plunkr 的用例。

在src/app.ts 上，指定您想要在Routes 配置中添加为子项的任何组件。例如，在ChildComponent 上添加Child2Component 作为嵌套路由将如下所示

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 将在 router-outlet 中的 router-outlet 中呈现 Child2Component 模板@ 987654335@

这里正在工作plunkr

【讨论】：

我的问题是我混淆了子路线的辅助路线。 router-outlets 在遍历树时会被组件填充。所以第一个路径匹配将进入第一个路由器出口，子路由匹配将进入下一个路由器出口，依此类推。辅助路线不同。当您在同一页面上有两个路由器插座并且您想要定位一个特定的路由器时，您可以使用 /path(routeroutletname:pathtocomponent) 的命名路由器插座格式。 Angular 2 Router v3 功能非常强大，而且最初使用起来有点复杂。
很高兴知道@JakeHova

【解决方案2】：

请尝试这样写，希望对你有帮助。

<a [routerLink]="['/childroute#secureRouterOutlet']">

【讨论】：

我试过了，但看起来也不行。我将路由器插座命名为“secureRouterOutlet”，然后将导航链接更改为您拥有它的方式，但它不起作用。我知道这在以前的 RC 版本中可以正常工作，但我不能再让它工作了。