导航栏中的ionic2切换适当使用

Question

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

  

<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>

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

Answer 1

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

我使用离子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>

Answer 2

如果将其置于<ion-buttons end></ion-buttons>内无效，请尝试使用<ion-buttons right></ion-buttons。从离子列表和离子项中获取<ion-toggle></ion-toggle>，因为它们默认为白色背景，将其放在离子按钮内。

您还可以通过向其添加类来使离子项的背景变为透明，并执行一些CSS样式或内联样式。

Answer 3

您可以做类似的事情

html

_bitcoincashjsLib2.default.HDNode

ts

<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>