Доступ к элементу из одноуровневого компонента в Angular 2+

Question

У меня есть набор компонентов, которые работают вместе.В основном я отображаю список меток и список данных для каждой метки.Поскольку область меток имеет изменяемый размер, она становится родственником компонента данных.Т.е. мой компонент списка выглядит так:

<app-list-labels></app-list-labels>
<app-list-data></app-list-data>

И метки списков и данные списков выглядят соответственно так:

// app-list-labels:
<div class="label-header">Labels</div>
<div class="label-labels" id="labels-labels">
   <!-- all of my labels looped over and displayed -->
</div>

// app-list-data:
<div class="data-header">Labels</div>
<div class="data-data" id="data-data">
   <!-- all of my data rows looped over and displayed -->
</div>

И labels-labels, и data-data переполнены-y установлено на auto, чтобы они могли прокручиваться, если количество строк превышает размер контейнера.Количество и размер строк между ними всегда одинаковы.Моя цель состоит в том, чтобы прокручивать оба контейнера, если прокручивается один контейнер.Поэтому мне нужно присоединить прослушиватель событий (scroll) к обоим этим элементам div (#data-data и #labels-labels) и обновить значение прокрутки для элемента без прокрутки.Моя проблема в том, как я могу получить доступ к элементу из одного компонента в sibling компоненте?Если бы app-labels было встроено в app-data, это было бы просто, но, будучи братьями и сестрами, я не вижу, как это сделать.

Answer 1

Вы можете попробовать выставить Div'ы, используя @Output decoratos, например:

<app-component-one (divComponent)="divOne = $event"></app-component-one>
<app-component-two (divComponent)="divTwo = $event"></app-component-two>

Брат 1:

import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';

@Component({
  selector: 'app-component-one',
  templateUrl: './component-one.component.html',
  styleUrls: ['./component-one.component.css']
})
export class ComponentOneComponent implements OnInit, AfterViewInit {

  @ViewChild('divComponent1') divComponent1: ElementRef;
  @Output() divComponent = new EventEmitter();

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    this.divComponent.emit(this.divComponent1);
  }


}

Брат 2:

import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';

@Component({
  selector: 'app-component-two',
  templateUrl: './component-two.component.html',
  styleUrls: ['./component-two.component.css']
})
export class ComponentTwoComponent implements OnInit, AfterViewInit {

  @ViewChild('divComponent2') divComponent1: ElementRef;
  @Output() divComponent = new EventEmitter();

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    this.divComponent.emit(this.divComponent1);
  }

}

Родительский компонент, тот, в котором есть братья и сестры:

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

@Component({
  selector: 'app-component-base',
  templateUrl: './component-base.component.html',
  styleUrls: ['./component-base.component.css']
})
export class ComponentBaseComponent implements OnInit, AfterViewInit {

  divOne: ElementRef;
  divTwo: ElementRef;

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    console.log('div one' , this.divOne);
    console.log('div two' , this.divTwo);
  }


}