Angular 路由器导出失败，routerLink 位于 AppComponent 之外

Question

我使用 Angular 5.2.0，我导航到:

/page/28/1

对应于:

{path: 'page/:albumId/:pageNo', component: AlbumPageComponent}

AlbumPageComponent html 包含:

<a class="nav-link" [routerLink]="[{ outlets: { popup: ['login'] } }]">

对应于:

{path: 'login', component: LoginComponent, outlet: 'popup'}

应该与 <router-outlet name="popup"></router-outlet> 一起使用放置到经典的 app.component.html 中(这是一个简单的 Angular cli 生成的项目)。

这不起作用，因为我在控制台中注意到它的路径格式错误:

NavigationStart(id: 3, url: '/page/28/1/(popup:login)')

但是这样使用时确实有效:

<a class="nav-link" [routerLink]="" (click)="goToLogin()">

AlbumPageComponent 具有:

goToLogin() {
  this.router.navigate([{outlets: {popup: ['login']}}]);
}

正确的路径就形成了:

NavigationStart {id: 3, url: "/page/28/1(popup:login)"}

请注意，两种情况下的路由命令是相同的，即:

[{outlets: {popup: ['login']}}]

问: routerLink 有什么问题吗？方法？怎么解决？

PS:我还在 .angular-cli.json 中使用:"baseHref": "/albums/"，尽管我认为这没有理由成为问题

编辑

https://angular.io/guide/router#wrap-up-and-final-app 中的示例也发生了同样的情况。为了复制，您必须复制 <a/> 联系到 CrisisCenterComponent html。这样，也像我一样，人们会使用 [routerLink]方法在与 AppComponent 不同的组件内。直接在AppComponent html中使用[routerLink]方法有效。

Answer 1

尝试这种格式:

<a class="nav-link" [routerLink]="['', { outlets: { popup: ['login'] } }]">

实际上，取自这里:https://stackoverflow.com/a/42098257/6528560