Как получить данные конкретного элемента на странице?

Question

[Bowen]

Здравствуйте.

Есть меню

<div class="menu__item"
      routerLinkActive #rla="routerLinkActive"
      [routerLinkActiveOptions]="{ exact: true }"
      *ngFor="let item of nav">
      <a routerLink="/{{ item.link }}" [ngClass]="{'menu__link': true, 'menu__link--active': rla.isActive}">
        <icon class="menu__icon" name="{{ item.icon }}"></icon>
      </a>
    </div>

Как можно получить ширину, высоту, отступы и прочее активной ссылки ?

Answer 1

[0xD34F]

Сам элемент - с помощью ViewChild. Ну а дальше - getComputedStyle.

Comments

[Bowen]

Но как повесить на активную ссылку ?

[0xD34F]

Bowen, повесить на контейнер, сделать querySelector('.menu__link--active')?

[Bowen]

0xD34F, Выдает null

[0xD34F]

Bowen, ну значит нет такого элемента.

[Bowen]

0xD34F, Элемент есть, но он выбирает почему-то первый

[0xD34F]

Bowen, а можете воспроизвести ситуацию в песочнице - codesandbox или stackblitz, например?

[Bowen]

0xD34F, stackblitz

[0xD34F]

Bowen, ну типа вот, по клику на кнопку выводится в консоль.

[Bowen]

0xD34F, Мне нужно при инициализации приложения. Например, когда пользователь зайдет впервые на сайт, он попадет на главную страницу. Соответствующий пункт в меню станет активным.

[0xD34F]

Bowen, можно попробовать использовать MutationObserver, типа так.

[Bowen]

0xD34F, Как вариант сойдет, спасибо.

Answer 2

[Bowen]

Можно еще так:

import { Directive, Output, ElementRef, EventEmitter,  ContentChildren } from '@angular/core';
import { NavigationEnd, Router, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[routerLink]'
})

export class ActiveRouteDirective {
  @ContentChildren(RouterLinkWithHref, { descendants: true }) linksWithHrefs;

  @Output('isActiveRouteEmitter') isActiveEmitter: EventEmitter<any> = new EventEmitter<any>();

  private subscription: Subscription;

  constructor(
    private router: Router, 
    private element: ElementRef
  ) {
    this.router = router;
    this.element = element;
    this.subscription = router.events.subscribe(s => {
        if (s instanceof NavigationEnd) {
          this.update();
        }
    });
  }

  ngAfterContentInit() {
    this.linksWithHrefs.changes.subscribe(() => this.update());
    this.update();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  update() {
    if (!this.linksWithHrefs || !this.router.navigated) return;
    const isActive = this.linksWithHrefs.some(link => this.router.isActive(link.urlTree, true));
    if (isActive) {
      this.isActiveEmitter.emit(this.element.nativeElement);
    }
  }
}

HTML код

<div class="menu__item" #rla="routerLinkActive" routerLinkActive="menu__item--active" [routerLinkActiveOptions]="{ exact: true }" *ngFor="let item of menu">
    <a (isActiveRouteEmitter)="getParams($event)" routerLink="/{{ item.link }}" [ngClass]="{'menu__link': true, 'menu__link--active': rla.isActive}">
        {{ item.name }}
    </a>
</div>

Добавляем метод getParams в компонент

getParams($target){
  console.log($target.getBoundingClientRect());
}

Ссылка с рабочим примером