web-dev-qa-db-ja.com

Ionic 2：戻るボタンのクリックイベントを生成

ナビゲーションバーで生成された戻るボタンをクリックするユーザーのアクションをログに記録しようとしていますが、クリックイベントを処理する方法が見つかりませんか？

ここからのion-nav-back-buttonがもう機能していないようです？

ionic2
20
Teddy Ding

公式Ionic docs によれば、NavBar）コンポーネントのbackButtonClick()メソッドをオーバーライドできます。

import { ViewChild } from '@angular/core';
import { Navbar } from 'ionic-angular';

@Component({
  selector: 'my-page',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>
          MyPage
        </ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
    ...
    </ion-content>
   `
})
export class MyPage {
  @ViewChild(Navbar) navBar: Navbar;
  constructor(private navController: NavController){}
  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
     // todo something
     this.navController.pop();
    }
  }
}
62
AnatolyS

最初にhideBackButtonをion-navbarに追加する必要があります。デフォルトの戻るボタンが削除されます。

次に、クリックイベントで簡単に管理できる独自のボタンを追加します。

コード：

<ion-header>
 <ion-navbar hideBackButton>
    <ion-buttons left>
        <button ion-button (click)="doYourStuff()">
            <ion-icon class="customIcon" name="arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Page Title</ion-title>
 </ion-navbar>
</ion-header>

doYourStuff()
{
    alert('cowabonga');
    this.navCtrl.pop();  // remember to put this to add the back button behavior
}

最終的なこと：Css。

アイコンは通常の戻るボタンよりも小さくなります。 Ionic2で使用されているデフォルトのものと同様にしたい場合は、サイズを大きくする必要があります。

.customIcon {

    font-size: 1.7em;
}
13
FrancescoMussi

デフォルトの戻るボタンアクションをカスタマイズするには、NavBarコンポーネントのbackButtonClick（）メソッドをオーバーライドする必要があります。

「customClass.ts」にNavbarコンポーネントをインポートします。デフォルトの動作をオーバーライドするためにauxMethodを作成し、ionViewDidLoadメソッドで呼び出します。

import { Navbar } from 'ionic-angular';

   export class myCustomClass {

   @ViewChild(Navbar) navBar: Navbar;

   ...

   ionViewDidLoad() {
       this.setBackButtonAction()
   }

   //Method to override the default back button action
   setBackButtonAction(){
     this.navBar.backButtonClick = () => {
     //Write here wherever you wanna do
      this.navCtrl.pop()
     }
   }
}

このコードはionic 3。でテストされています

6
Ariel Antonio Fundora

手動でやりたい場合：

これをpage.htmlに追加します

<ion-header>
    <ion-toolbar>
        <ion-buttons start>
            <button (click)="goBack()" royal>
                <ion-icon name="arrow-round-back"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Details page</ion-title>
    </ion-toolbar>
</ion-header>

Page.tsファイルに追加します。

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

@Component({
  templateUrl: 'build/pages/awesome/awesome.html',
})
export class AwesomePage {
  constructor(private navCtrl: NavController) {
  }
  goBack(){
    this.navCtrl.pop();
  }

}
1
LeRoy

誰かが見ている場合。 Ionic 3はライフサイクルイベントを提供します。このような目的には、「ionViewDidLeave」または「ionViewWillLeave」のいずれかを使用できます。

他のイベントを確認するには、ドキュメントをご覧ください。 https://ionicframework.com/docs/api/navigation/NavController/

0
Junaid

誰かが使用した後にまだ問題がある場合

@ViewChild(Navbar) navBar: Navbar;

[〜＃〜] not [〜＃〜]を試して、constructor()に_this.navbar.backButtonClick_を入れます

別の方法として、ionViewDidLoad()に配置することもできます。

0
lowzhao