2017-04-29 19 views
1

アンドロイド用のイオン2のタイトルの問題のため。私はいくつかのCSSを設定し、title.andの中心を作ると、ナビゲーションバーに左と右のボタンを入れている。しかし、私はその2つのボタンのonclick機能を適用していません。コンソールメッセージもありません。ここIONIC 2 navbar左右のボタンが作動しない

私のコードです:

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

私の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は動作していません。私は間違っていますか?

ありがとうございます!

+0

@surajはい私が試したが、そのは動作しません。コンソールメッセージもありません –

+0

@surajその来るが、デザインは縦にならない...その水平のように見える。私はいくつかのCSSを適用する必要があるでしょう –

+0

おそらく..あなたは私があなたにこの記事のPDFの問題のための1つの助けを頼んだ –

答えて

0

はここで、イオンのボタンを使用する

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

左に表示されているだけ私は2つのボタンを適用。その縦に表示されます。水平ではありません。 –

1

を試してみて機能するソリューションです。

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

関連する問題