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

Posted 2023-03-16

【中文标题】单击 ion-label 以切换离子切换

【英文标题】：Click on ion-label to toggle the ion-toggle

【发布时间】：2020-09-16 17:57:33

【问题描述】：

我正在使用 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

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

我正在使用离子角度

提前致谢

【问题讨论】：

我经历了很多解决方案 - 如果不是其中之一，请至少发布一些。

您可以使用在 ion toggle add #mytoggle 和标签添加属性 (click)="mytoggle.toggle()" 上的工作，也许它不是 .toggle 但肯定有触发它的方法..

请不要将标签 ionic3 和 ionic4 用于 ionic5，这是有区别的。发布一些代码也会有很大帮助，因为现在 Ionic 变得与框架无关，有不同的方式来使用它。默认情况下切换也不这样做（请参阅链接页面），您必须自己实现它，有点像@MostafaHarb 指出的，但我认为它是通过使用(click)="mytoggle.checked = true"

您链接的文档没有列出您正在尝试做的示例，因此我认为这不可能直接。

添加您的代码示例，然后让我们看看如何提供帮助...

【参考方案1】：

你可以这样做：

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

代码：

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

Try it in stackblitz

【参考方案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>

【参考方案3】：

上述解决方案仅适用于一个切换。如果您有动态 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>