передача событий между родственными компонентами в угловых

Question

У меня есть два родственных компонента в угловых.событие должно быть связано и с другим компонентом.

Я новичок здесь в angular Пожалуйста, помогите мне.

sibling-1 HTML

<div [class.close1]="mi_state">
    <a class="navbar-btn sidebar-toggle" (click)="toggleMenu()" role="button"><span class="icon-bar"></span>
    </a>
</div>

sibling-1 TS

mi_state = false;
  hm_state = false;
  toggleMenu() {
    if(this.mi_state == false){
      this.mi_state = true;
      this.hm_state = true;
    }else{
      this.mi_state = false;
      this.hm_state = false;
    }

sibling-2 HTML

<aside [class.hide_menu]="hm_state">
</aside>

У меня есть кнопка в одном компоненте, и соответствующие классы должны переключаться одним щелчком мыши.Я мог бы получить это в том же компоненте.Не работает в компоненте Sibling.

Answer 1

, если ваш компонент не имеет отношения parent-child, но находится в сцене во время и находится в том же <router-outlet>, вы можете использовать ссылочную переменную (я полагаю, у вас есть navvar и сторонний компонент), иначе вам нужно использоватьсервис, см. документы общение через сервис

<navvar #navbarRef><navvar>
<aside [class.hide_menu]="navbarRef.hm_state">
</aside>

Answer 2

Я действительно создал stackblitz , и ваше решение работает нормально.

Я полагаю, вы забыли добавить некоторое содержимое и высоту / ширину, чтобы вы не увидели его отражение.

.close1{
  background: red;
  width: 200px;
}

.hide_menu{
  background: yellow;
  height: 200px;
}