同一模板中的Angular2多个路由器出口

Question

同一模板中可以有多个路由器插座吗？如果是，那么如何配置路由？我正在使用angular2 beta。

Answer 1

通过配置路由器并为路由器插座提供名称，您可以在同一模板中具有多个路由器插座，您可以按以下步骤实现。

以下方法的优点是，您可以避免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将使用分配的模板进行加载，然后角度路由器将检查路由并根据名称在指定的路由器出口中加载子组件。

像上面一样，您可以将路由器配置为在同一路由中具有多个路由器出口。