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

Question

我一直在尝试 Angular 9，并且一直坚持正确使用 @Output()-装饰器和 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);
}

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

提前致谢。

Answer 1

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

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

Angular 9: Why is my custom EventEmitter not working?

events

decorator

eventemitter

typescript

angular