Angular EventEmitter 似乎不起作用

Question

我有一个主要组件，它调用一个子组件，它是一个切换面板，当我激活切换时，它会发出切换的值（真或假）

切换-pannel.component.ts

@Output() toggleChange = new EventEmitter<boolean>();

  onChange(event: MatSlideToggleChange) {
    this.toggle = event.checked;
    this.toggleChange.emit(this.toggle);
  }

当我这样使用这个组件时：

main.component.html

<app-toggle-panel
        [(toggle)]="toggleValue"
      >
</app-toggle-panel>

效果不错，isToggle的值变了。

但是当我这样使用它时:

main.component.html

<app-toggle-panel
        (toggle)="onToggleChange($event)"
      >
</app-toggle-panel>

在主要组件中具有此功能：

main.component.js

  onToggleChange(event) {
    this.toggleValue = event;
    this.emit();
  }

当我切换开关时，onToggleChange 函数从未被调用，我不明白为什么。

问题是当“toggleValue”的值改变时我必须调用函数 emit。

我还尝试使用 ngOnChanges 来检测“toggleValue”的变化，但即使在切换面板组件中调用了 emit 函数，ngOnChanges 也没有检测到任何变化。

ngOnChanges(changes: SimpleChanges) {
  console.log(changes)
}

我该如何解决这个问题？

Answer 1

您需要为输出命名或绑定到发出的变量

选项 1

child.component.ts

@Output('toggle') toggleChange = new EventEmitter<boolean>();

parent.component.html

<app-toggle-panel (toggle)="onToggleChange($event)">

选项 2

child.component.ts

@Output() toggleChange = new EventEmitter<boolean>();

parent.component.html

<app-toggle-panel (toggleChange)="onToggleChange($event)">

Angular EventEmitter 似乎不起作用

Angular EventEmitter doesn't seem to work

eventemitter

ngonchanges

angular

angular-event-emitter

选项 1

选项 2