1

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

切换面板.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”的值发生变化时，我必须调用函数发出。

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

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

我该如何解决这个问题？

4

1 回答 1

1

您需要提及输出的名称或绑定到发出的变量

选项1

child.component.ts

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

父组件.html

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

选项 2

child.component.ts

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

父组件.html

<app-toggle-panel (toggleChange)="onToggleChange($event)">
于 2020-06-15T09:37:57.073 回答