angular2目标特定路由器出口 [英] angular2 target specific router-outlet

问题描述

我有一个应用程序，该应用程序具有一个基本路由器出口，该路由器出口被用作整个应用程序的基础.然后是一个子路由器出口，一旦用户登录，该子路由器出口将显示由于单击基础路由器出口中单击的导航链接而加载的所有组件.在基本模板中单击导航链接时，我希望能够定位到子路由器出口.

I have an app that has a base router-outlet that is used as a base for the entire app. then a child router-outlet that is used once a user is logged in to display any components loaded as a result of clicking on a navigation link clicked that is based in the base router-outlet. I want to be able to target the child router-outlet when a navigation link is clicked in the base template.

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

When I click on a nav item in the base template, it loads the component in the base router-outlet. That makes good sense to me. I would like to know how I can click a nav item in the base template and have the desired component load in the child router outlet.

当我曾经能够执行以下操作时，我找不到像在RC4(我认为是RC4)中那样可以定位目标路由器出口的任何信息:

I can't find any information on targeting a named router-outlet like I could do in RC4 (I think it was RC4) when i used to be able to do something like:

[routerLink]="/childroute#secureRouterOutlet"

这是一个非常简单的插件，它模仿当前的设置方式: plunkr

Here is a really simple plunker that mimics how things are currently setup: plunkr

推荐答案

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

I would like to know how I can click a nav item in the base template and have the desired component load in the child router outlet

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

You can achieve that by enabling nested routes, you will need to setup children property on Routes. Here is the doc.

这是如何完成的，具体取决于您的plunkr用例.

Here is how it can be done, specific to your use case from plunkr.

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

On src/app.ts specify any components you want to add as children in your Routes configuration. For example, adding Child2Component as nested routes on ChildComponent will be like below

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

在导航上，您需要按如下所示将链接添加到Child2Component

On the navigation, you will need to add the link to Child2Component as below

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

现在，当您点击该链接时，ChildComponent将在ChildComponent

Now, when you hit that link, ChildComponent will render Child2Component template inside router-outlet in ChildComponent

这里正在工作 plunkr

这篇关于angular2目标特定路由器出口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！