angular - 单击 ion-label 以切换离子切换

Question

我正在使用 ionic 5 创建一个页面。

我正在制作一个“记住我”按钮，使用<ion-toggle>.

<ion-item>
    <ion-label>remember me</ion-label>
    <ion-toggle class="button"></ion-toggle>
</ion-item>

Ion-toggle工作正常，但我无法通过单击它旁边的标签来切换它。

我尝试了很多解决方案。

API 文档的链接是：https ://ionicframework.com/docs/api/toggle

有什么方法可以使离子切换和文本都可点击？

我正在使用离子角度

提前致谢

Answer 1

您可以这样做：

• 例如，将 Ionic id 添加到切换#mytoggle
• 使用标签中的 id(click)来切换.checked属性

代码：

<ion-item>
    <ion-label (click)="mytoggle.checked = !mytoggle.checked">remember me</ion-label>
    <ion-toggle #mytoggle class="button"></ion-toggle>
</ion-item>

在 stackblitz 中尝试

Answer 2

在 ts 文件中：声明：

@ViewChild('mytoggle', {static: true}) mytoggle: IonToggle;

changeToggle() {
    const toggle = this.mytoggle.checked;
    toggle = !toggle;
}

在 html 中：

 <ion-item>
            <ion-label (click)="changeToggle()">remember me</ion-label>
            <ion-toggle class="button">
   </ion-toggle>
          </ion-item>

Answer 3

嗨，一切的解决方案是：

<ion-toggle color="danger" [(ngModel)]="myvar" [checked]="myvar" (ionChange)=myMethod()></ion-toggle>

在您的组件内部：

myMethod() {
    console.log(">>>>: " + this.myvar);
    if (this.myvar) {
      //do something
    } else {
      //do something
    } 
  }

希望这能解决每一个问题。

Answer 4

上述解决方案仅适用于一个切换。如果您有动态 From，则需要以下内容：

TS 文件：

changeToggle(fieldname) {
    const fieldValue = JSON.parse(this.form.get(fieldname).value);
    this.form.controls[fieldname].setValue(!fieldValue);
}

HTML 文件：

<ion-label (click)="changeToggle(item.name)">{{item.label}}:</ion-label>
    <ion-toggle formControlName="{{item.name}}"
                (ionChange)="settingsChange($event)">
</ion-toggle>