在Angular 4中,可以使用<router-outlet>
来定义主路由和子路由的插座。辅助插座是通过在<router-outlet>
上添加name
属性来定义的。
首先,在主路由的模板中,使用<router-outlet>
来定义主路由的插座:
<router-outlet></router-outlet>
然后,在子路由的模板中,使用<router-outlet>
来定义子路由的插座,并通过name
属性来指定辅助插座的名称:
<router-outlet name="aux"></router-outlet>
接下来,在定义路由时,使用outlet
属性来指定路由应该渲染到哪个插座中。对于主路由,不需要指定outlet
属性,默认会渲染到主插座中。对于子路由,需要通过outlet
属性来指定渲染到哪个辅助插座中。
const routes: Routes = [
{ path: '', component: HomeComponent }, // 主路由
{ path: 'sub', component: SubComponent, outlet: 'aux' } // 子路由
];
在上面的例子中,当访问主路由时,会渲染HomeComponent
到主插座中。当访问子路由/sub
时,会渲染SubComponent
到辅助插座aux
中。
这样就可以在Angular 4中对准带有子路由的辅助插座了。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云云数据库MySQL版(CDB),腾讯云云原生容器服务(TKE)。
腾讯云产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云