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: 我也用: "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] 方法有效。

Answer 1

试试这个格式：

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

实际上，取自这里：

angular routerLink 在 AppComponent 外部失败

angular router outlet fails with routerLink outside AppComponent

angular

router-outlet