角度事件发射器似乎不起作用

Question

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

toggle-pannel.component.ts

@Output() toggleChange = new EventEmitter<boolean>();
onChange(event: MatSlideToggleChange) {
this.toggle = event.checked;
this.toggleChange.emit(this.toggle);
}

当我以这种方式使用此组件时：

主组件.html

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

它运行良好，isToggle 的值已更改。

但是当我这样使用它时：

主组件.html

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

在主组件中使用此功能：

主组件.js

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

当我切换切换开关时，永远不会调用函数 onToggleChange 并且我不明白为什么。

问题是我必须在"toggleValue"的值发生变化时调用函数发出。

我还尝试使用 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)">