angular2目标特定路由器插座

我有一个应用程序具有用作整个应用程序基础的基本路由器插座。那么一个用户登录后使用的子路由器插座将显示由于单击基于基本路由器插座点击的导航链接而导致加载的任何组件。我希望能够在基本模板中单击导航链接时能够定位子路由器插座。angular2目标特定路由器插座

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

我无法找到目标为名为路由器的出口就像我可以在RC4做任何的信息（我认为这是RC4）时，我曾经是能够做到像：

[routerLink]="/childroute#secureRouterOutlet"

这里是一个非常简单的蹦床，模仿目前的设置：plunkr

来源

2016-11-08 JakeHova

我想知道我可以在基本模板点击导航项目，必须在子路由器出口所需的组件负载

你能够通过嵌套的途径实现这一目标，您需要在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 
    } 
];

在导航，您需要将链接如下

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

添加到Child2Component现在，当你点击该链接，ChildComponent将呈现内router-outletChild2Component模板ChildComponent

这里工作plunkr

来源

2016-11-08 01:35:54 Michael

我的问题是，我很困惑辅助路线的儿童路线。路由器出口在遍历树时被填充组件。因此，第一个路径匹配将在第一个路由器插座中进行，子路由匹配将在下一个路由器插座中进行，等等。辅助路线是不同的。当您在同一页面上有两个路由器插座并且您想要指定一个特定路由器时，则可以使用/ path（routeroutletname：pathtocomponent）的命名router-outlet格式。 Angular 2路由器v3的功能非常强大，并且在开始时将头部缠绕起来有点复杂。 – JakeHova

angular2目标特定路由器插座

回答

相关问题