导航栏中的 ionic2 切换正确使用答案

【问题标题】：ionic2 toggle in navbar use appropriately导航栏中的 ionic2 切换正确使用
【发布时间】：2018-11-03 02:38:16
【问题描述】：

我正在尝试使用导航栏中的切换来在英语和德语之间切换语言。

<button ion-button menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>

<ion-title>{{ 'CATALOGUE' | translate }}</ion-title>

<ion-buttons end>
  <ion-list>

    <ion-item>
      <ion-toggle [(ngModel)]="language"></ion-toggle>
    </ion-item>

  </ion-list>
</ion-buttons>

这基本上看起来很难看。在导航栏中使用这种切换按钮的正确方法是什么？

【问题讨论】：

标签： ionic2

【解决方案1】：

你可以这样做

html

<ion-header>
    <ion-navbar>
        <ion-title>
            Stackoverflow
        </ion-title>
        <ion-buttons end>
            <button ion-button (click)="toggleClick()">
                <ion-toggle #autoToggle [(ngModel)]="autoRefresh" checked="true"></ion-toggle>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Toggle } from 'ionic-angular';    
@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {    
    autoRefresh = true;
    @ViewChild('autoToggle') autoToggle: Toggle;
    constructor() {}

    toggleClick() {
        this.autoToggle.checked = !this.autoToggle.checked;
    }
}

【讨论】：

【解决方案2】：

我知道这为时已晚，但希望它可以帮助任何有类似问题的人。

我正在使用 ionic 3，这对我来说效果很好

在导航栏中使用切换按钮：

<ion-buttons end>
  <ion-toggle (ionChange)="onToggle($event)" [(ngModel)]="language"></ion-toggle> // ionChange event will fire every time when you change the toggle state
</ion-buttons>

【讨论】：

【解决方案3】：

如果将其放在 <ion-buttons end></ion-buttons> 中不起作用，请尝试改用 <ion-buttons right></ion-buttons。从 ion-list 和 ion-item 中获取<ion-toggle></ion-toggle>，因为它们默认为白色背景，将其放在 ion-buttons 内。

您还可以通过向其添加类并进行一些 css 样式或内联样式来使 ion-item 的背景透明。

【讨论】：