有谁知道为什么链接#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 !!
希望这可以帮助!!