Question

我正在使用Angular 7。我对routerLinkActive有问题。当我在导航栏中选择链接时，它会为.active类提供链接，但是当我单击页面上的其他位置时，链接会丢失他的样式，但在控制台中，活动类仍处于活动状态。那么如何在我所在的页面链接上保持活动的类样式。我这样做了很多次，没有遇到问题，尝试复制工作代码，但仍然没有进展。

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;
}

Answer 1

尝试使用绝对路径

df1['rate'] = df1.pop('item_count').rdiv(s, axis=0)

d= {'time_last':'time'}
df1 = df1.reset_index(level=1, drop=True).reset_index().rename(columns=d)
print (df1)
  cat.      time      rate
0    X  00:00:06  0.333333
1    X  07:40:29  0.928571
2    Y  00:01:10  0.153846
3    Y  00:02:53  1.000000
4    X  11:50:48  0.714286
5    X  11:55:42  1.000000

Answer 2

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

我在a和.active之间有空格抱歉浪费时间...

Angular 7活动路线链接会失去他的风格吗？

2 个答案: