NativeScript gérant l'événement du bouton de retour

Question

J'essaie de gérer le bouton de retour matériel dans une application NativeScript. J'utilise NativeScript version 2.3.0 avec Angular.

Voici ce que j'ai dans main.ts fichier

// this import should be first in order to load some required settings (like globals and reflect-metadata) 
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform"; 
import { NgModule,Component,enableProdMode } from "@angular/core"; 
import { AppComponent } from "./app.component"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { routes, navigatableComponents } from "./app.routing"; 
import { secondComponent } from "./second.component"; 
import {AndroidApplication} from "application"; 
@Component({ 
    selector: 'page-navigation-test', 
    template: `<page-router-outlet></page-router-outlet>` 
}) 
export class PageNavigationApp { 
} 
@NgModule({ 
    declarations: [AppComponent,PageNavigationApp,secondComponent 
     // ...navigatableComponents 
     ], 
    bootstrap: [PageNavigationApp], 
    providers:[AndroidApplication], 
    imports: [NativeScriptModule, 
     NativeScriptRouterModule, 
    NativeScriptRouterModule.forRoot(routes) 
    ], 
}) 
class AppComponentModule { 

    constructor(private androidapplication:AndroidApplication){ 
     this.androidapplication.on("activityBackPressed",()=>{ 
      console.log("back pressed"); 

     }) 
    } 

} 

enableProdMode(); 

platformNativeScriptDynamic().bootstrapModule(AppComponentModule); 

Je demande importation avec

import {AndroidApplication} from "application";

Ensuite, dans le constrouctor de appComponentModule j'enregistre l'événement pour activityBackPressed et faire juste un console.log.

Cela ne fonctionne pas.

Qu'est-ce qui me manque ici?

Answer 1

J'utilise NativeScript avec angulaire aussi bien et cela semble fonctionner assez bien pour moi:

import { RouterExtensions } from "nativescript-angular"; 
    import * as application from "application"; 
    import { AndroidApplication, AndroidActivityBackPressedEventData } from "application"; 
    import { isAndroid } from "platform"; 

    export class HomeComponent implements OnInit { 
     constructor(private router: Router) {} 

     ngOnInit() { 
     if (!isAndroid) { 
      return; 
     } 
     application.android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => { 
      if (this.router.isActive("/articles", false)) { 
      data.cancel = true; // prevents default back button behavior 
      this.logout(); 
      } 
     }); 
     } 
    } 

Notez que hooker dans backPressedEvent est un truc global, vous devrez donc vérifier la page sur laquelle vous vous trouvez et agir en conséquence, selon l'exemple ci-dessus.

Answer 2

Normalement, vous devriez avoir une activité android et déclarer la fonction backpress sur cette activité. Utiliser seulement AndroidApplication n'est pas suffisant. Essayez ce code:

import {topmost} from "ui/frame"; 
import {AndroidApplication} from "application"; 

let activity = AndroidApplication.startActivity || 
      AndroidApplication.foregroundActivity || 
      topmost().android.currentActivity || 
      topmost().android.activity; 

activity.onBackPressed = function() { 
    // Your implementation 
} 

Vous pouvez également jeter un oeil à ce snippet par exemple