Ionic/Angular：如何在父组件监听子组件ion-toggle的变化

有两种常用方式可以实现需求，下面分别说明：

方法一：通过@Output事件通知父组件 #

1. 修改子组件代码 #

在子组件的.ts文件中定义@Output事件发射器，用于向父组件传递toggle的状态变化：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html'
})
export class ChildComponent {
  // 子组件内部维护toggle状态
  enabled: boolean = false;
  // 定义输出事件，传递状态给父组件
  @Output() enabledChange = new EventEmitter<boolean>();

  toggleEnabled() {
    // 向父组件发送当前toggle状态
    this.enabledChange.emit(this.enabled);
  }
}

子组件模板保持原有代码即可：

<ion-buttons slot="end">
    <ion-toggle [(ngModel)]="enabled" (ionChange)="toggleEnabled()"></ion-toggle>
</ion-buttons>

2. 修改父组件代码 #

在父组件模板中绑定子组件的enabledChange事件到自身的toggleEnabled方法，接收状态参数：

<child-component (enabledChange)="toggleEnabled($event)"></child-component>

更新父组件.ts中的toggleEnabled方法，同步状态并执行逻辑：

enable: boolean = false;

toggleEnabled(newState: boolean) {
    this.enable = newState;
    // 这里添加你需要执行的业务逻辑
}

方法二：双向数据绑定（支持父组件主动控制子组件状态） #

如果需要父组件也能主动修改子组件toggle的状态，可使用Angular双向绑定语法：

1. 修改子组件代码 #

同时定义@Input接收父组件状态、@Output事件传递变化：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html'
})
export class ChildComponent {
  // 接收父组件传入的初始状态
  @Input() enabled: boolean = false;
  // 输出事件名称需与输入属性名+Change匹配
  @Output() enabledChange = new EventEmitter<boolean>();

  toggleEnabled() {
    this.enabledChange.emit(this.enabled);
  }
}

2. 修改父组件代码 #

父组件模板使用双向绑定语法，同时绑定事件触发方法：

<!-- 双向绑定同步状态，同时绑定事件触发父组件方法 -->
<child-component [(enabled)]="enable" (enabledChange)="toggleEnabled($event)"></child-component>

父组件的toggleEnabled方法与方法一中的实现一致即可。

这样既保留了子组件的ion-toggle按钮，又能在父组件中实时获取状态变化并执行指定方法。

内容的提问来源于stack exchange，提问作者zen20002222