Angular EventEmitter 似乎不起作用

Question

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

切换面板.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”的变化，但即使在切换面板组件中调用了发出函数，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)">