Angular 7 активная маршрутная ссылка теряет свой стиль? - PullRequest
Новая
       45

Angular 7 активная маршрутная ссылка теряет свой стиль?

0 голосов
/ 24 февраля 2019

Я использую Angular 7. У меня проблема с routerLinkActive.Когда я выбираю ссылку в навигационной панели, она дает класс .active для ссылки, но когда я щелкаю где-то еще на странице, ссылка теряет свой стиль, но в консоли активный класс все еще активен.Итак, как сохранить стиль активного класса на странице ссылки, где я нахожусь.Я делал это так много раз, и у меня никогда не было проблем, я пытался скопировать рабочий код, но все еще без прогресса.

console.log app.module.ts 

import { RouterModule } from "@angular/router";
RouterModule.forRoot([
      {
        path: "",
        component: DashboardComponent,
        canActivate: [AuthGuardService]
      },
      { path: "login", component: LoginComponent },
      { path: "register", component: RegisterComponent },
      {
        path: "pacijent/:id",
        component: PacijentComponent,
        canActivate: [AuthGuardService]
      },

      {
        path: "pacijent/:id/edit",
        component: PacijentEditComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "istorija/:id/:id",
        component: NalazComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "obavestenja",
        component: ObavestenjaComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "users/:id",
        component: ProfilComponent,
        canActivate: [AuthGuardService]
      },

      { path: "**", component: NotfoundComponent }
    ])

html 

  <li *ngIf="isLoggedIn">
        <a
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          routerLink=""
          ><i class="fas fa-home"></i> Glavna Strana</a
        >
      </li>
  <li *ngIf="isAdmin">
        <a
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          routerLink="obavestenja"
          ><i class="fas fa-signal"></i> Statistika</a
        >
      </li>

css 

.nav-right .nav li a:hover,
.nav-right .nav li a:focus {
  font-size: 24px;
  text-decoration: none;
  color: #0078ad;
  background: white;
}
.nav-right .nav li a .active {
  font-size: 24px;
  text-decoration: none;
  color: #0078ad;
  background: white;
}

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019 
.nav-right .nav li a.active {
  font-size: 24px;
  text-decoration: none;
  color: #0078ad;
  background: white;
}

У меня было пространство между a и .active Извините, что потратил время ...

0 голосов
/ 24 февраля 2019

Попробуйте использовать абсолютные пути 

routerLink="/"
routerLink="/obavestenja"
...