加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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 !!

希望这可以帮助!!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读