angular – routerLink语法定位多个路由器出口(主要辅助)
发布时间:2020-12-17 17:22:56 所属栏目:安全 来源:网络整理
导读:有谁知道为什么链接#1和#2工作但链接#3不工作? a [routerLink]="['/contact']"Contact Solo/a |a [routerLink]="[{ outlets: { aux: 'aside' }}]"Aux Solo/a |a [routerLink]="['/contact',{ outlets: { aux: 'aside' }}]"Contact + Aux/arouter-outlet/rou
有谁知道为什么链接#1和#2工作但链接#3不工作?
<a [routerLink]="['/contact']">Contact Solo</a> | <a [routerLink]="[{ outlets: { aux: 'aside' }}]">Aux Solo</a> | <a [routerLink]="['/contact',{ outlets: { aux: 'aside' }}]">Contact + Aux</a> <router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> 换句话说:我可以单独激活主路由(链路#1),我可以单独激活辅助路由(链路#2),但我不能同时激活主路由和辅助路由(链路#3).链接#3仅激活主路由,但在控制台中不会触发错误. 有趣的是,单击链接#1然后链接#2产生我想要的(主路由和辅助激活)与接触路径(aux:旁边)而链接#3有一个接触路径/(aux:旁边)(注意/ ). 普兰克:https://plnkr.co/edit/WqTRjux7muHjalIL3rsL?p=preview 路线声明: const appRoutes: Routes = [ { path: 'contact',component: ContactComponent,},{ path: 'aside',component: PopupComponent,outlet: 'aux' } ]; 我尝试了多种组合和语法无济于事. 解决方法
试试下面,
<a [routerLink]="[{ outlets: { primary: 'contact',aux: 'aside' }}]">Contact + Aux</a> 更新Plunker !! 希望这可以帮助!! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |