角路由器链接不导航答案

【问题标题】：Angular routerlink not navigating角路由器链接不导航
【发布时间】：2019-09-27 21:04:01
【问题描述】：

我有一个材料侧导航，我正在尝试使用 routerlink 进行链接。但是，链接没有导航。它们根本不可点击。当我手动走相应的路线时，他们会做出相应的反应，因为他们的 routerLinkActive css 正在被激活。

我正在尝试将路线放到包含 SVG 图像的 div 上。

我已经尝试了普通 a 标签上的链接，只是为了看看它是否与 SVG 实现有关。我很确定所有子路线也都正确实施。

我的 HMTL

<mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav mode="side" opened="true" class="mat-elevation-z6">
      <div class="side-nav-btns">
        <div class="item" 
            [routerLink]="['./dashboard']" 
            [routerLinkActive]="['active-nav-btn']">
            <svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/dashboard.svg"></svg-icon>
        </div>
        <div class="item" 
            [routerLink]="['./bot']" 
            [routerLinkActive]="['active-nav-btn']">
            <svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/circuit.svg"></svg-icon>
        </div>
        <div class="item"
             [routerLink]="['./lobby']"
             [routerLinkActive]="['active-nav-btn']">
          <svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/poker-table.svg"></svg-icon>
        </div>
        <div class="item"
             [routerLink]="['./tournament']"
             [routerLinkActive]="['active-nav-btn']">
          <svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/tournament.svg"></svg-icon>
        </div>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>

我的组件路由

const platformRoutes: Routes = [
  {
    path: '', component: PlatformComponent, children: [
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'bot', component: BotComponent},
      {path: 'lobby', component: LobbyComponent},
      {path: 'tournament', component: TournamentComponent}
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(platformRoutes)
  ],
  exports: [RouterModule]
})
export class PlatformRoutingModule {
}

我的根路由

const appRoutes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'landing-pages'},
  {path: 'landing-pages', loadChildren: './landing-pages/landing-pages.module#LandingPagesModule'},
  {path: 'auth', loadChildren: './auth/auth.module#AuthModule'},
  {path: 'platform', loadChildren: './platform/platform.module#PlatformModule'}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules, useHash: true})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

我在平台模块中包含了所有子组件。

我希望当我单击其中一个图标时它会导航到相应的路线，但是，我目前无法单击它们。

【问题讨论】：

标签： angular angular-routerlink

【解决方案1】：

我能够弄清楚。它与足够有趣的css有关。我已将 sidenav 的 z-index 设置为 -1，因为我也在使用工具栏并且它覆盖了阴影。

然而，这让我无法与 sidenav 中的任何东西交互，（有道理），所以我只是更改了 z-index 并让它工作。

【讨论】：

【解决方案2】：

DIV 不是可操作的元素，尝试使用锚标签，例如：

<a class="item" [routerLink]="['./dashboard']" [routerLinkActive]="['active-nav-btn']">
  <svg-icon class="side-nav-btn" [applyCss]="true" src="../../assets/dashboard.svg"></svg-icon>
</a>

【讨论】：

我试过了，但仍然无法导航。不确定我是否以某种方式错误地声明了我的路径，但我不这么认为。
你测试过你的路由了吗？我的意思不是点击按钮，而是在搜索栏中输入http://localhost:4200/dashboard（例如）
是的，他们成功加载，以及对应的div成功激活了routerLinkActive。
我也尝试过没有 div 或 SVG 的标签，但仍然无法导航。