angular – routerLink语法定位多个路由器出口(主要辅助)

前端之家收集整理的这篇文章主要介绍了angular – routerLink语法定位多个路由器出口(主要辅助)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有谁知道为什么链接#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 !!

希望这可以帮助!!

猜你在找的Angularjs相关文章