Angular получить ElementRef из routerLinkActive

Как и в заголовке, мне нужно получить ElementRef routerLinkActive, чтобы понять, где мне нужно разместить «чернильную полосу» (например, вкладку «Материальный дизайн») в правильном положении.

здесь я есть мое боковое меню навигации

  <mat-sidenav fxLayout='column' 
   fxLayoutAlign='start center'#sidenav 
   mode="over" [(opened)]="opened" position="end" 
   class="nav-sidenav">

        <!-- Here the Navigation -->
        <div  class="nav-sidenav-container" fxFlex='1 1 100%'>

          <div class="ink-bar"></div> <!-- I NEED TO MOVE THIS -->
          <ul class="nav">

            <li *ngFor="let menuItem of menuItems" 
             routerLinkActive="active" class="{{menuItem.class}}">
              <a [routerLink]="[menuItem.path]">
                <i class="nav-icon-container">
                  <mat-icon>{{menuItem.icon}}</mat-icon>
                </i>
                <p>{{menuItem.title}}</p>
              </a>
            </li>

          </ul>
        </div>
      </mat-sidenav>

первый элемент «li» имеет размер 180 пикселей, смещение между элементами составляет 60 пикселей. Но мне нужно знать, какой элемент является активным в начале (например, если пользователь вставляет URL-адрес в браузер), есть способ получить ElementRef активной ссылки


angular elementref
person ALGDB    schedule 18.04.2018    source источник
comment
Чего вы пытаетесь достичь здесь? Зачем вам elementRef?   -  person CornelC    schedule 18.04.2018
comment
Мне нужно переместить полосу чернил сбоку от активного элемента li   -  person ALGDB    schedule 18.04.2018
comment
Знаете ли вы какой-либо другой способ получить информацию о том, какой маршрут активен?   -  person ALGDB    schedule 18.04.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете найти ElementRef, используя ViewChildren и запросив директиву RouterLinkActive с опцией read: ElementRef.

Мы откладываем выполнение метода findActiveLink в setTimeout, чтобы дать RouterLinkActive время обновить представление соответствующим классом CSS.

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';
import { RouterLinkActive } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
  <a [routerLinkActive]="activeClass" routerLink="/">Hello</a>
  <a [routerLinkActive]="activeClass" routerLink="/hello">Hello</a>
  <a [routerLinkActive]="activeClass" routerLink="/world">Hello</a>
  <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  activeClass = 'active';

  @ViewChildren(RouterLinkActive, { read: ElementRef })
  linkRefs: QueryList<ElementRef>

  constructor() { }

  ngAfterViewInit() {
    setTimeout(() => {
      const activeEl = this.findActiveLink();
      console.log(activeEl);
    }, 0);
  }

  findActiveLink = (): ElementRef | undefined => {
    return this.linkRefs.toArray()
      .find(e => e.nativeElement.classList.contains(this.activeClass))
  }
}

Прямая демонстрация

person Tomasz Kula    schedule 18.04.2018