Question

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

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

我无法找到任何关于定位路由器插座的信息，就像我在RC4中做的那样（我认为它是RC4），当时我曾经能够做类似的事情：

[routerLink]="/childroute#secureRouterOutlet"

这是一个非常简单的插件，模仿当前设置的内容：plunkr

Answer 1

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

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

以下是如何完成的，特定于plunkr的用例。

在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内呈现ChildComponent模板

这是有效的plunkr

Answer 2

请尝试这样写，希望它有所帮助。

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

angular2 target specific router-outlet

2 个答案: