Угловой роутерлинк не навигационный - PullRequest
Новая
       16

Угловой роутерлинк не навигационный

0 голосов
/ 10 мая 2019

У меня есть материал sidenav, который я пытаюсь подключить с помощью routerlink. Тем не менее, ссылки не являются навигацией. Они вообще не кликабельны. Они реагируют соответственно, когда я вручную иду по соответствующему маршруту, так как их routerLinkActive css активируется.

Я пытаюсь поместить маршруты в div, содержащий изображение SVG.

Я попробовал ссылки на обычный тег, чтобы посмотреть, имеет ли он какое-то отношение к реализации 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 {}

Я включил все дочерние компоненты в модуль платформы.

Я ожидаю, что при нажатии на один из значков он перейдет к соответствующему маршруту, однако в настоящее время я не могу щелкнуть по ним.

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Я смог понять это. Это было довольно смешно с CSS. Я установил для sidenav z-index, равный -1, поскольку я также использую панель инструментов, и она закрывала тень.

Это, однако, сделало так, что я не мог взаимодействовать с чем-либо в sidenav (имеет смысл), поэтому я просто изменил z-index и заставил его работать.

0 голосов
/ 10 мая 2019

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>
...