如何通过另一按钮控制Ionic Toggle切换按钮的开关状态？

当然可以实现这个需求！你只需要借助Toggle的模板引用变量，就能轻松通过按钮来控制它的开关状态，下面提供两种简单的实现方式：

方法一：模板内直接处理（快速简洁） #

直接在按钮的点击事件里修改Toggle的checked属性即可，不需要额外的组件逻辑：

<!-- 添加控制按钮 -->
<button ion-button (click)="ioToggle.checked = !ioToggle.checked">切换Toggle状态</button>

<!-- 你原有的Toggle组件 -->
<ion-toggle class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)" #ioToggle ></ion-toggle>

点击按钮时，ioToggle.checked会被取反，Toggle的状态随之切换，同时原有的ionChange事件也会正常触发，你的add()方法会收到最新的状态值。

方法二：组件类中处理（适合复杂逻辑） #

如果后续需要给按钮添加更多业务逻辑，比如状态校验、额外操作，可以通过ViewChild获取Toggle实例来控制：

1. 修改组件类（比如TogglePage.ts） #

import { Component, ViewChild } from '@angular/core';
import { IonToggle } from '@ionic/angular'; // Ionic 4+版本，Ionic 3请用ionic-angular

@Component({
  selector: 'page-toggle',
  templateUrl: 'toggle.html'
})
export class TogglePage {
  // 通过模板引用变量获取Toggle实例
  @ViewChild('ioToggle') ioToggle: IonToggle;

  constructor() {}

  // 按钮点击触发的切换方法
  toggleSwitch() {
    // 切换Toggle的checked状态
    this.ioToggle.checked = !this.ioToggle.checked;
    // 若需要手动触发add方法（一般修改checked会自动触发ionChange，可根据情况选择）
    // this.add(this.ioToggle.checked);
  }
}

2. 修改模板中的按钮 #

<button ion-button (click)="toggleSwitch()">切换Toggle状态</button>
<ion-toggle class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)" #ioToggle ></ion-toggle>

两种方法都能完美实现你的需求，根据实际场景选择即可~

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