angular - 相对路径不适用于 Angular 6 中的 routerLink

Question

我在构建 Angular 应用程序时遇到一些问题。我注意到在整个应用程序范围内，将相对路径与 routerLink 一起使用是行不通的。它不会抛出错误，也不会导航到错误的页面，它什么都不做；我测试了这个尝试导航到根级组件，以及具有相同结果的子组件。但是，如果我使用绝对路径，它的路由就很好。

我真的在这个问题上摸不着头脑，我在 SO 等上找不到类似的问题，所以我只需要知道从哪里开始寻找。

编辑:如果它是您点击的第一个链接，它会在应用首次加载时追加一次，但不会再次加载。

更新:按照建议，我在 StackBlitz 中重现了这个问题。请关注这个link并阅读 nav-component.component.html 中的注释。

例如，此菜单中的第一个链接什么都不做，但所有其他链接都按预期工作；再一次，我在应用程序中的每个链接上测试了这个，结果相同:

<div class="list-group menu-list-group">

  <a routerLink="./artists-profiles"
     class="list-group-item btn btn-primary"
  (click)="artistsMenuChoice('artist-profiles')">
    Artist Profiles
  </a>

  <a [routerLink]="['/artists/artist-videos']"
     class="list-group-item btn btn-primary">
    Videos
  </a>

  <a [routerLink]="['/artists/artist-endorsement']"
     class="list-group-item btn btn-primary">
    Get Endorsed
  </a>

</div>

<hr>

<div class="list-group menu-list-group">

  <a href="#" class="list-group-item btn btn-primary">
    Shopping Cart
  </a>

  <a href="#" class="list-group-item btn btn-primary">
    {{ menuCredAction }}
  </a>

</div>

这是我的应用路由模块:

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent},
  { path: 'artists', component: ArtistsComponent, children: [
      {path: '', component: ArtistsStartComponent},
      {path: 'artist-profiles', component: ArtistProfilesComponent},
      {path: 'artist-videos', component: ArtistVideosComponent},
      {path: 'artist-endorsement', component: ArtistsGetEndorsedComponent},
    ] },
  { path: 'about', component: AboutComponent, children: [
      {path: '', component: AboutStartComponent}
    ] },
  { path: 'shop', component: ShopComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'auth', component: AuthComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ],

})
export class AppRoutingModule {

}

Answer 1

The routing is done based on the the router config 'tree' which does not necessarily match what the URL path is.

根据你提供的html所在的位置，即使url相同，相对路径也可以不同。调试此问题的简单方法是在链接所在的组件中记录 ActivatedRoute.url 或 ActivatedRoute.routeConfig。

Link to quote in github issue