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"

这是一个非常简单的 plunker，它模仿当前设置的方式: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 中的 router-outlet 内渲染 Child2Component 模板

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

这里正在运行 plunkr

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