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 中（它是一个简单的角度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 中使用：＆＃34; baseHref＆＃34;：＆＃34; / albums /＆＃34; 虽然我认为这没有理由成为一个问题

修改

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

Answer 1

请尝试以下格式：

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

实际上，从这里开始：https://stackoverflow.com/a/42098257/6528560

角度路由器出口在AppComponent外部与routerLink失败

1 个答案: