IONIC 2导航栏左右按钮不起作用 [英] IONIC 2 navbar left and right button not working

问题描述

因为离子2中的标题问题对于android。我已经设置了一些CSS并设置了标题中心。我已将左右按钮放在导航栏中。但是，当我为这两个按钮应用onclick功能时，它不起作用。甚至没有控制台消息。

Because of the title issue in ionic 2 for android. i have set some css and make centre of title.and i have put the left and right button in the nav bar. but when i apply the onclick functionality for that two button.its not working. even no console message too.

这是我的代码：

html：

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons class="loginnavbtn" (click)="goback()" left>

    CANCEL
    <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      LOGIN
    </ion-title>

    <ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
    SAVE
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>


   </ion-content>

我的css：

ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
  }
}

my js：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';



@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})

export class LoginPage {
  constructor(public navCtrl:NavController) {
  }

 public goback() {
    this.navCtrl.pop();
}
public loginbtntap() {
    this.navCtrl.pop();
}

}

我的onclick无效。我做错了吗？

My onclick is not working.what i ma doing wrong ?

谢谢!!

推荐答案

我在ionic3中面临同样的问题。

请使用按钮标记 ion-buttons ，这个解决方案适合我。

I faced the same issue in ionic3.
Please use button tag with ion-buttons and this solution works for me.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <ion-header>
      <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
      <ion-toolbar>
        <button ion-buttons class="loginnavbtn" (click)="goback()" left>

        CANCEL
        <!-- left aligned content here -->
        </button>

        <ion-title>
          LOGIN
        </ion-title>

        <button ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
        SAVE
          <!-- left aligned content here -->
        </button>
      </ion-toolbar>
    </ion-header>
    <ion-content>


       </ion-content>

这篇关于IONIC 2导航栏左右按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！