Html IONIC 2导航栏左右按钮不工作

因为安卓版的爱奥尼亚2的标题问题。我已经设置了一些css，并使标题居中。我已经把左右按钮放在导航栏上。但是当我为两个按钮应用onclick功能时，它不起作用。甚至没有控制台消息

这是我的密码：

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>

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

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();
}

}

我的js:

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

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

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();
}

}

我的鼠标坏了。我做错了什么

谢谢

尝试使用离子按钮

<button ion-button class="loginnavbtn" (click)="goback()" left>Name of button</button>

按钮的名称

尝试使用离子按钮

<button ion-button class="loginnavbtn" (click)="goback()" left>Name of button</button>

按钮的名称

以下是有效的解决方案

<ion-header>
 <ion-navbar>
  <ion-buttons *ngIf="user != null" left>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons  *ngIf="user == null" left>
    <button ion-button (click)="loginBtnClicked()">
      <ion-icon name="log-in"></ion-icon>
    </button>
  </ion-buttons>
<ion-title>Home</ion-title>
  <ion-buttons right>
    <button ion-button (click)="searchClicked()">
    <ion-icon name="search"></ion-icon>
  </button>
  </ion-buttons>

家

---

以下是有效的解决方案

<ion-header>
 <ion-navbar>
  <ion-buttons *ngIf="user != null" left>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons  *ngIf="user == null" left>
    <button ion-button (click)="loginBtnClicked()">
      <ion-icon name="log-in"></ion-icon>
    </button>
  </ion-buttons>
<ion-title>Home</ion-title>
  <ion-buttons right>
    <button ion-button (click)="searchClicked()">
    <ion-icon name="search"></ion-icon>
  </button>
  </ion-buttons>

家

---

我在ionic3中遇到了同样的问题。
请将

按钮

标记与

离子按钮

一起使用，此解决方案适合我

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

取消
登录
拯救

我在ionic3中遇到了同样的问题。
请将

按钮

标记与

离子按钮

一起使用，此解决方案适合我

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

取消
登录
拯救

@suraj是的，我试过了，但没用。没有控制台消息too@suraj它来了，但设计不是垂直的…它看起来像水平的。我是否需要应用一些css来实现这一目标。。你必须改变我不能tell@suraj谢谢，我在这篇文章中为pdf问题向你寻求了一个帮助。。我还没有用离子1或角1来回答这个问题one@suraj是的，我试过了，但没用。没有控制台消息too@suraj它来了，但设计不是垂直的…它看起来像水平的。我是否需要应用一些css来实现这一目标。。你必须改变我不能tell@suraj谢谢，我在这篇文章中为pdf问题向你寻求了一个帮助。。我并没有用离子1或角度1来回答这个问题，它只显示在左边，我用了两个按钮。它显示为垂直的。。它只显示在左边，我用了两个按钮。它显示为垂直的。。不是水平的。