NativeScriptアプリでハードウェアの戻るボタンを処理しようとしています。 AngularでNativeScriptバージョン2.3.0を使用しています。
これが私がmain.ts
ファイルに持っているものです
// 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);
でアプリケーションをインポートしています
import {AndroidApplication} from "application";
次に、appComponentModule
のコンストラクターで、activityBackPressed
のイベントを登録し、console.logを実行しています。
これは動作しません。
ここで何が欠けていますか?
私はNativeScriptをAngularでも使用していますが、これは私にとって非常にうまく機能しているようです:
import { RouterExtensions } from "nativescript-angular";
import * as application from "tns-core-modules/application";
import { AndroidApplication, AndroidActivityBackPressedEventData } from "tns-core-modules/application";
import { isAndroid } from "tns-core-modules/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();
}
});
}
}
BackPressedEventへのフックはグローバルなものであるため、上記の例に従って、表示しているページを確認し、それに応じて行動する必要があることに注意してください。
通常、Androidアクティビティがあり、そのアクティビティでbackpress関数を宣言する必要があります。AndroidApplication
のみを使用するだけでは不十分です。次のコードを試してください。
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
}
また、これを見ることができます スニペット 例えば
import { Component, OnInit } from "@angular/core";
import * as Toast from 'nativescript-toast';
import { Router } from "@angular/router";
import * as application from 'application';
@Component({
moduleId: module.id,
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent {
tries: number = 0;
constructor(
private router: Router
) {
if (application.Android) {
application.Android.on(application.AndroidApplication.activityBackPressedEvent, (args: any) => {
if (this.router.url == '/main') {
args.cancel = (this.tries++ > 0) ? false : true;
if (args.cancel) Toast.makeText("Press again to exit", "long").show();
setTimeout(() => {
this.tries = 0;
}, 2000);
}
});
}
}
}