为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

动漫人物 2019-11-12 14:53:45
同一模板中可以有多个路由器插座吗?如果是,那么如何配置路由?我正在使用angular2 beta。
查看完整描述

3 回答

?
料青山看我应如是

TA贡献1772条经验 获得超7个赞

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


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


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


查看完整回答
反对 回复 2019-11-12
  • 3 回答
  • 0 关注
  • 1008 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信