angular routerLink 在 AppComponent 外部失败

angular router outlet fails with routerLink outside AppComponent

我使用 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: 我也用: "baseHref": "/albums/" in .angular-cli.json 虽然我认为没有理由成为问题

编辑

https://angular.io/guide/router#wrap-up-and-final-app 中的例子也是如此。为了复制,您必须将 Contact<a/> 复制到 CrisisCenterComponent html。这样,就像我一样,人们会在与 AppComponent 不同的组件中使用 [routerLink] 方法。在 AppComponent 中直接使用 html [routerLink] 方法有效。

试试这个格式:

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

实际上,取自这里: