当 routerLink 在 angular 中处于活动状态时，我们可以 select <a> 元素吗？

Question

我想在其路由器 link 处于活动状态时 select <a> 通过 className 元素，但它 returns null

navbar.component.html代码：

<nav class="profile-navbar">
  <ul>
    <li class="posts-item">
      <a
        [routerLink]="['/app/profile', username, 'posts']"
        routerLinkActive="active-link"
        >Posts</a
      >
    </li>
    <li class="images-item">
      <a
        [routerLink]="['/app/profile', username, 'images']"
        routerLinkActive="active-link"
        >Images</a
      >
    </li>
  </ul>
</nav>

navbar.component.ts代码：

import { AfterViewInit, Component, OnInit } from '@angular/core';

@Component({
  selector: 'profile-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit, AfterViewInit {
  
  constructor() { 
  }
  
  ngOnInit(): void {
  }
  
  ngAfterViewInit(): void {
    const activeLink = document.querySelector('.active-link');
    console.log(activeLink)
  }

}

如何select element 基于 routerLinkActive class 的元素？？

Answer 1

您不能使用此 LifeCycleHook，而是尝试使用 ngDoCheck() 或监听路由更改 () 并根据事件执行 selection，甚至更好地仅在您的.css 文件：

a.active {
/* your style */
}

如果您只想设置样式，通常不需要 select 它，但在您计算 translate3d 和 scaleX 的情况下，我不确定...

Answer 2

要获得一系列“div”，您可以使用模板引用变量和 ViewChildren。当您拥有 ViewChildren 时，您可以找到带有 class 或另一个属性.

的元素

routerLinks 的情况与方法类似，但您可以在 ViewChildren 中将 [routerLinksActive 视为“ElementRef”并视为“RouterLinkActive”

有些喜欢

  //links are the "RouterLinkActive"
  @ViewChildren(RouterLinkActive) links:QueryList<RouterLinkActive>
  
  //lisk are the "RouterLinkAvtive" but seeing as ElementRef
  @ViewChildren(RouterLinkActive,{read:ElementRef}) linksElements:QueryList<ElementRef>
  @ViewChild('indicator') indicator:ElementRef
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.pipe(
       filter(x=>x instanceof NavigationEnd),
       startWith(null)).subscribe(res=>{

      //we need enclosed in a setTimeout because when the event NavigationEnd
      //happens, Angular are not add the class "active-links"
      // nor link isActive=true
      setTimeout(()=>{

        //first find the "index" in the QueryList
        const index=(this.links.map(
          (x:RouterLinkActive,i:number)=>({isActive:x.isActive,index:i}))          
          .find(x=>x.isActive) || {index:-1}).index
  
        //it's the same index in the ElementRef
        if (index>=0)
        {
          const el=this.linksElements.find((_,i)=>i==index)
          
          //We use the "el" to change the style.top of the indicator
           this.indicator.nativeElement.style.top=
                       el.nativeElement.offsetTop+'px'
        }
        else
        {
          this.indicator.nativeElement.style.top='-100px'
        }
      })
    })
  }

在哪里

<nav class="profile-navbar">
<ul>
  <li class="posts-item">
    <a
      [routerLink]="['/hello']"
      routerLinkActive="active-link"
      >Posts</a
    >
  </li>
  <li class="images-item">
    <a
      [routerLink]="['/by']"
      routerLinkActive="active-link"
      >Images</a
    >
  </li>
</ul>
<div #indicator class="indicator"></div>
</nav>

点赞显示在this stackblitz

当 routerLink 在 angular 中处于活动状态时，我们可以 select <a> 元素吗？

Can we select <a> element when it's routerLink is active in angular?

html

javascript

angular

queryselector