Angular中兄弟组件之间的事件通信答案

【问题标题】：event communication between sibling components in angularAngular中兄弟组件之间的事件通信
【发布时间】：2019-09-29 01:23:23
【问题描述】：

我有两个有角度的兄弟组件。事件也应该绑定到其他组件。

我是 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>

我在一个组件中有一个按钮，并且相应的类应该在单击时切换。我可以在同一个组件中得到它。不适用于同级组件。

【问题讨论】：

标签： angular

【解决方案1】：

我实际上创建了一个stackblitz，您的解决方案运行良好。

我相信你忘了添加一些内容和高度/宽度，所以你没有看到它反映。

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

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

【讨论】：

【解决方案2】：

如果您的组件没有父子关系，但当时在场景中并且在同一个<router-outlet> 中，您可以使用引用变量（我想您有 navvar 和备用组件），否则您需要使用服务，请参阅文档communicate via a service

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

【讨论】：