Angular中@Output与EventEmitter失效：组件值传递异常排查

嘿，我立刻就发现问题所在啦！你把事件绑定的位置放错了😎

核心问题 #

showEvent是你在NavbarComponent里通过@Output暴露的自定义事件，按照Angular的组件通信规则，这个事件的监听必须绑定在子组件的实例标签上——也就是<app-navbar>，而不是你现在绑定的<nav>标签。<nav>是普通的HTML元素，根本没有showEvent这个输出事件，所以你的AppComponent完全接收不到子组件传递过来的值。

修正后的代码 #

只需要调整app.component.html里事件绑定的位置：

<!-- 把(showEvent)绑定在app-navbar标签上 -->
<app-navbar (showEvent)="getToggle($event)"></app-navbar>
<div id="wrapper">
  <nav id="sidebar" [ngClass]="{show: show}">
    {{ show }}
    <app-sidebar></app-sidebar>
  </nav>
  <div id="content">
    <app-breadcrumb></app-breadcrumb>
    <router-outlet></router-outlet>
  </div>
</div>

额外小建议 #

为了避免页面初始化时show变量是undefined的情况，你可以给AppComponent里的show设置一个初始值，和子组件保持一致：

// app.component.ts
export class AppComponent {
  // 初始化默认值为true
  public show: boolean = true;
  getToggle($event) {
    this.show = $event;
  }
}

这样调整之后，点击按钮时AppComponent就能正常接收到子组件传递的show值，sidebar的ngClass也能正确触发啦～

内容的提问来源于stack exchange，提问作者Sandra Willford