आयनिक 2: जेनरेटेड बैक बटन इवेंट

Question

पर क्लिक करें मैं नेविगेशन बार में जेनरेट किए गए बैक बटन पर क्लिक करने के उपयोगकर्ता की कार्रवाई को लॉग करने का प्रयास कर रहा हूं, लेकिन मुझे क्लिक इवेंट को संभाला नहीं जा सकता है?

ऐसा लगता है कि यहां से आयन-एनवी-बैक-बटन अब काम नहीं कर रहा है?

Answer 1

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

}

Answer 2

आप भी चाहते हैं मैन्युअल रूप से ऐसा:

अपने 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(); 
    } 

} 

Answer 3

आप को 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; 
} 

Answer 4

अनुकूलित डिफ़ॉल्ट वापस बटन कार्रवाई के लिए आप backButtonClick ओवरराइड की जरूरत है() विधि NavBar घटक का।

आपके "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() 
    } 
    } 
} 

इस कोड में आयनिक 3.

Answer 5

मामले किसी में देख रहा है परीक्षण किया गया है। आयनिक 3 जीवन चक्र घटनाओं की पेशकश करता है। या तो "ionViewDidLeave" या "ionViewWillLeave" का उपयोग ऐसे उद्देश्यों के लिए किया जा सकता है।

अधिक घटनाओं को देखने के लिए दस्तावेज़ देखें। https://ionicframework.com/docs/api/navigation/NavController/