首页 文章

angular2目标特定路由器插座

提问于
浏览 次
3

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

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

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

[routerLink]="/childroute#secureRouterOutlet"

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

angular angular2-routing

2 回答

  • 3

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

    您可以通过启用嵌套路由来实现这一点，您需要在 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 模板

    这是工作plunkr

    回复于
  • 0

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

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

相关问题