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

Question

Мое приложение структурировано так:

<nav></nav>
<router-outlet></router-outlet>
<footer></footer>

В роутер-розетке у меня разные компоненты в зависимости от маршрута.На некоторых из этих страниц мне нужно получить доступ к DOM-элементам навигации или нижнего колонтитула для таких вещей, как pageYOffset, height и т. Д. Для закрепления позиции.Я знаю такие вещи, как ViewChild, Renderer2 и ElementRef, но не совсем уверен, как это будет работать.Я создаю сервис?Как это может выглядеть?

Answer 1

Предполагая, что дочерние компоненты имеют тип NavComponent и FooterComponent, вы можете извлечь соответствующие элементы DOM с помощью @ViewChild(..., { read: ElementRef }) в ngAfterViewInit:

@ViewChild(NavComponent, { read: ElementRef }) private navElementRef: ElementRef;
@ViewChild(FooterComponent, { read: ElementRef }) private footerElementRef: ElementRef;

ngAfterViewInit() {
  const navElement = this.navElementRef.nativeElement;
  const footerElement = this.footerElementRef.nativeElement;
  ...
}

См. this stackblitz для демонстрации.

Эти элементы можно сделать доступными для других частей приложения с помощью простого сервиса:

export class AppElementsService {
  public navElement: HTMLElement;
  public footerElement: HTMLElement;
}

и установить в компоненте приложения:

@ViewChild(NavComponent, { read: ElementRef }) private navElementRef: ElementRef;
@ViewChild(FooterComponent, { read: ElementRef }) private footerElementRef: ElementRef;

constructor(private appElementsService: AppElementService) { }

ngAfterViewInit() {
  this.appElementsService.navElement = this.navElementRef.nativeElement;
  this.appElementsService.footerElement = this.footerElementRef.nativeElement;
}

Примечание: вам может потребоваться установить атрибут стиля display компонентов nav и footer на block или inline-block, чтобы получить позицию и размер соответствующих элементов.