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

路由是根据路由器配置“树”完成的，该树不一定与URL路径匹配。

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

Link to quote in github issue

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

1 个答案: