Angular 9：为什么我的自定义 EventEmitter 不起作用？答案

【问题标题】：Angular 9: Why is my custom EventEmitter not working?Angular 9：为什么我的自定义 EventEmitter 不起作用？
【发布时间】：2020-06-27 00:11:36
【问题描述】：

我一直在尝试 Angular 9，并且一直坚持正确使用 @Output()-decorator 和 EventEmitter-class 有一段时间了。出于某种原因，我的事件似乎没有冒泡到我的子组件的直接父组件。我的子组件称为NavbarComponent，应该在单击按钮时触发toggletool-事件。 navbar.component.ts-文件的相关部分如下所示：

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  @Output('toggletool') toggleEvent: EventEmitter<string> = new EventEmitter<string>();

  ...

  toggle(id: string) {
    this.toggleEvent.emit(id);
  }

}

toggle(...)-函数肯定被调用并且id参数设置正确。我现在正试图在我的AppComponent 中捕捉事件。模板如下所示：

<app-location-tool [isActive]="toolIsActive('locationtool')" (toggletool)="toggleTool($event)">
</app-location-tool>

app.component.ts-文件声明了一个函数toggleTool(...)，如下所示：

toggleTool(event) {
  console.log(event);
}

但是，这个函数从未被调用过（根据缺少的控制台输出判断），我真的不知道为什么。我猜我忽略了一些小错误，希望你们能帮助我。

提前谢谢你。

【问题讨论】：

标签： angular typescript events decorator eventemitter

【解决方案1】：

你的组件的选择器是app-navbar，但是你使用了app-location-tool

【讨论】：