首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >针对多个路由器出口(主+辅助)时的routerLink语法

针对多个路由器出口(主+辅助)时的routerLink语法
EN

Stack Overflow用户
提问于 2017-03-02 11:23:17
回答 1查看 4.8K关注 0票数 4

有人知道为什么链接#1和#2工作,但链接#3不工作吗?

代码语言:javascript
运行
复制
<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产生我想要的东西(主路由和辅助激活的)和contact(aux:aside)的路径,而链接3有contact/(aux:aside)的路径(注意/)。

Plunkr:https://plnkr.co/edit/WqTRjux7muHjalIL3rsL?p=preview

路线申报:

代码语言:javascript
运行
复制
const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
  },
  {
    path: 'aside',
    component: PopupComponent,
    outlet: 'aux'
  }
];

我尝试过多种组合和语法,但都没有效果。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-02 14:58:19

试试下面,

代码语言:javascript
运行
复制
 <a [routerLink]="[{ outlets: { primary: 'contact', aux: 'aside' }}]">Contact + Aux</a>

更新柱塞

希望这能帮上忙!

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42554091

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档