主页 / 问题 / 860318
Accepted
Aleksey exec
Asked:2020-07-26 03:35:03 +0000 UTC2020-07-26 03:35:03 +0000 UTC

如何添加我遵循的 routerLink 类

  • 772

这个想法是，当我点击链接时，<nav routerLink="" class="pages__link"> 我需要添加一个类 .active{color: red}，告诉用户他在这个页面上，当他转到另一个页面时，这个类将从这个页面中删除并分配给另一个，等等......

在jquery中它看起来像这样

$('.el').on('click', function() {
   $('.el').css({ color: 'black' })
   $(this).css({ color: 'red' })
})

但我不仅想为链接分配一个类，而是在路由器成功完成NavigationEnd之后，即作为对成功事件的回调，并将类分配给*( routerLink )*用户单击的链接？

app.component.html

<header class="df jcc aic">
  <nav class="page df jcc aic">
      <nav  routerLink="" class="pages__link">{{ 'home' | uppercase }}</nav>
      <nav  routerLink="about" class="pages__link">{{ 'about' | uppercase }}</nav>
      <nav  routerLink="galery" class="pages__link">{{ 'galery' | uppercase }}</nav>
  </nav>
</header>
 <div class="container" [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
   <router-outlet #o="outlet"></router-outlet>
 </div>

应用程序路由.module.ts

export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'galery', component: GaleryComponent }
];
маршрутизация

1 个回答

  1. Best Answer
    <header class="df jcc aic">
  <nav class="page df jcc aic">
    <nav routerLinkActive="active" routerLink="" class="pages__link">{{ 'home' | uppercase }}</nav>
    <nav routerLinkActive="active" routerLink="about" class="pages__link">{{ 'about' | uppercase }}</nav>
    <nav routerLinkActive="active" routerLink="galery" class="pages__link">{{ 'galery' | uppercase }}</nav>
  </nav>
</header>
<div class="container" [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
  <router-outlet #o="outlet"></router-outlet>
</div>
    • -1

相关问题