有谁知道为什么链接 #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 仅激活主要路由,但不会在控制台中触发任何错误。
有趣的是,点击 link #1 然后点击 link #2 生成我想要的(主路由和辅助激活),路径为 contact(aux:aside)
而 link #3 的路径为 contact/(aux:aside)
(注意 /
)。
Plunkr: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 !!
希望这对您有所帮助!
关于angular - 针对多个路由器 socket (主要+辅助)时的 routerLink 语法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42554091/