Вызов методов и свойств из родственного компонента в Angular?

Question

Я новичок в Angular. У меня есть два компонента, и когда компонент A щелкнул, должен отобразиться компонент 2 (добавить класс). Если это родительский дочерний компонент, я могу сделать это, вызвав ссылочную переменную шаблона. Но в данном случае это не так. Они братья и сестры. Я пробовал много мест, но они показывали только передаваемые данные. Какой для этого наилучший метод?

Comp-A HTML

<app-comp-a>
<button (click)="profilePanel.panelOpen()"></button>
<app-comp-a>

Comp-B HTML

<app-comp-b #profilePanel>
<div *ngClass="panelCss">
<p>panel opened</p>
</div>
<app-comp-b>

Comp-B TS

panelCss = 'hidePanel';

panelOpen(){
panelCSS = 'showPanel';
}

Answer 1

Все, что вам нужно, это сервис, в котором у вас есть переменная типа Subject. С помощью этой переменной вы сможете в своем компоненте B ждать, пока компонент A что-то отправит.

service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class SiblingServiceService {

  showSibling = new Subject<boolean>();

  constructor() { }

}

showSibling is ваш Тема, где вы можете ждать данных в компоненте B

компонент A

import { theService } from 'path/to/service'

...

export class SiblingAComponent implements OnInit {

  constructor(private service: theService) { }

  ngOnInit() {
  }

  openPanel(){
    this.service.showSibling.next(true);
  }
}

компонент B

import { theService } from 'path/to/service'

...

export class SiblingBComponent implements OnInit {

  active: boolean = false;

  constructor(private service: theService) { }

  ngOnInit() {
  }

  openPanel(){
    this.service.showSibling.subscribe(res => {
      this.active = res
    });
  }
}

Вот рабочий пример stackblitz