Angular2多个路由器sockets在同一个模板中
是否有可能在同一个模板中有多个路由器sockets？
如果是，那么如何configuration路由？
我正在使用angular2testing版。
谢谢。
是的，你可以，但你需要使用辅助路由。 你需要给你的router-outlet命名：
<router-outlet name="auxPathName"></router-outlet> 并设置您的路线configuration：
@RouteConfig([ {path:'/', name: 'RetularPath', component: OneComponent, useAsDefault: true}, {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent} ])
看看这个例子： http : //plnkr.co/edit/JsZbuR?p = preview另外这段video： https : //www.youtube.com/watch?v= z1NB-HG0ZH4 &feature=youtu.be
更新RC.5辅助路由已经改变了一点：在你的路由器sockets中使用一个名字：
<router-outlet name="aux">
在你的路由器configuration中：
{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}
新的RC.3路由器的辅助路由语法已经改变。
辅助路线有一些已知的问题，但基本的支持是可用的。
您可以定义路由以显示名为<router-outlet>
路由configuration
{path: 'chat', component: ChatCmp, outlet: 'aux'}
命名的路由器sockets
<router-outlet name="aux">
导航辅助路线
this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");
似乎从routerLink导航辅助路由尚不支持
<a [routerLink]="'/team/3(aux:/chat;open=true)'">Test</a> <a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>
还没有尝试过自己呢
在一个组件中参见Angular2路由器
RC.5 routerLink DSL（与createUrlTree参数相同） https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor
您可以在同一个模板中configuration多个路由器sockets，方法是configuration您的路由器并为您的路由器sockets提供名称，
你可以做到这一点如下。
下面的方法的好处是，你可以避免与它看起来脏兮兮的url。 例如：/ home（aux：login）等
假设加载你是引导appComponent。
app.component.html
<div class="layout"> <div class="page-header"> //first outlet to load required component <router-outlet name='child1'></router-outlet> </div> <div class="content"> //second outlet to load required component <router-outlet name='child2'></router-outlet> </div> </div>
添加以下到您的路由器。
{ path: 'home', // you can keep it empty if you do not want /home component: 'appComponent', children: [ { path: '', component: childOneComponent, outlet: 'child1' }, { path: '', component: childTwoComponent, outlet: 'child2' } ] }
现在，当加载/ home时，appComponent将获得已分配的模板的加载，然后angular路由器将根据名称检查路由并将子组件加载到指定的路由器出口中。
像上面一样，你可以configuration你的路由器在同一路由上有多个路由器sockets。
是的，你可以像上面的@tomer所说的那样。 我想添加一些指向@tomer的答案。
- 首先，您需要为要在视图中加载第二个路由视图的
router-outlet提供名称。 （辅助路由angular度2） -
在angular2路由中几个重要的点在这里。
- path或辅助（正好需要其中的一个给你的path，你必须显示为url）。
- 组件，加载程序，redirectTo（仅需要其中之一，您要在路由上加载哪个组件）
- 名称或（可选）（只需要其中的一个，在routerLink时指定的名称）
- 数据（可选，无论你想发送路由，你必须在接收端使用routerParams。）
欲了解更多信息在这里和这里阅读。
import {RouteConfig, AuxRoute} from 'angular2/router'; @RouteConfig([ new AuxRoute({path: '/home', component: HomeCmp}) ]) class MyApp {}
<a [routerLink]="[{ outlets: { list:['streams'], details:['parties'] } }]">Link</a>
<div id="list"> <router-outlet name="list"></router-outlet> </div> <div id="main"> <router-outlet name="details"></router-outlet> </div>
`
{ path: 'admin', component: AdminLayoutComponent, children:[ { path: '', component: AdminStreamsComponent, outlet:'list' }, { path: 'stream/:id', component: AdminStreamComponent, outlet:'details' } ] }
