Angular 使用自定义路由处理ionic2应用程序中的后退按钮事件时出现问题

我已经按照建议在我的ionic 2应用程序中实现了后退按钮代码。但它并没有像预期的那样发挥作用

然而，我在点击后退按钮时得到console.log（）

下面是我的代码供参考

1） app.routes.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Login } from '../pages/Login/Login';
import { Orders } from '../pages/Orders/Orders';
import { OrderDetails } from '../pages/Orders/OrderDetails';
import { AssignOrder } from '../pages/Orders/AssignOrder';

const routes: Routes = [
    {
        path: '', redirectTo: '/Orders',
        pathMatch: 'full'
    },
    {
        path: 'Login',
        component: Login
    },
    {
        path: 'Orders',
        component: Orders
    },
    {
        path: 'OrderDetails/:orderid',
        component: OrderDetails
    },
    {
        path: 'AssignOrder',
        component: AssignOrder
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }
export const routedComponents = [Login, Orders, OrderDetails, AssignOrder];

2） app.component.ts

import { Component } from '@angular/core';
import { App, Platform, ViewController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@Component({
  templateUrl: 'app.html'
})

export class MyApp {

  constructor(app: App, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      if (splashScreen) {
        setTimeout(() => {
          splashScreen.hide();
        }, 100);
      }
    });

    platform.registerBackButtonAction(() => {
      let nav = app.getActiveNav();
      console.log(nav);
      let activeView = nav.getActive();
      if (activeView != null) {
        console.log('activeView:' + activeView);
        if (nav.canGoBack()) {
          nav.pop();
        } else if (typeof activeView.instance.backButtonAction === 'function')
          activeView.instance.backButtonAction();
        else nav.parent.select(0); // goes to the first tab
      }
      else {
        console.log('activeView is null');
      }
    });
  }
}

3） 订单

在Orders页面中，若我单击back按钮，它将调用app.component.ts中的函数，在该函数中，我将在

let activeView=nav.getActive（）中获得未定义的“activeView”行。所以，在控制台中打印“activeView为空”（如第一个解决方案中所述）。请看图片

4） OrderDetails.ts

在OrderDetails页面中，若我单击“上一步”按钮，它将调用OrderDetails.ts中的函数，因为我正在重写app.component.ts的方法
this.platform.registerBackButtonAction（this.backButtonAction，10）（如第二个解决方案中所述）。我在控制台日志中也得到了“backButtonAction called”。但是它在
this.gotoOrders（）中给了我错误行。在“this”中找不到gotoOrders（）函数。在调试窗口中，我已展开“this”，但在那里看不到gotoOrders（）函数。请看图片

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
从'@angular/Router'导入{Router，ActivatedRoute，Params}；
从“离子角度”导入{Platform，AlertController，LoadingController}；
从“../../models/User”导入{User}；
从“../../models/Order”导入{Order}；
从“../../providers/UserService”导入{UserService}；
从“../../providers/OrderService”导入{OrderService}；
@组成部分({
选择器：“页面医嘱详细信息”，
templateUrl:'OrderDetails.html'
})
导出类OrderDetails实现OnInit{
模态：任何；
@输入（）顺序：顺序；
@Output（）close=neweventemitter（）；
用户：用户；
装载：任何；
isStaff=this.userService.user.Role==“STAFF”；
navigated=false；//如果在此处导航，则为true
构造函数（公共路由器：路由器、，
专用路由：激活的路由，
公共用户服务：用户服务，
公共平台：平台，
公共orderService:orderService，
公共警报Ctrl:AlertController，
公共加载（Ctrl:LoadingController）{
this.platform.registerBackButtonAction（this.backButtonAction，10）；
}
恩戈尼尼特（）{
if（this.userService.user==null）{
this.userService.logout（）；
}
否则{
this.route.params.forEach（（params:params）=>{
if（参数['orderid']！==未定义）{
设orderid=params['orderid']；
this.navigated=true；
}
});
}
}
backButtonAction（）{
log（'backButtonAction called'）；
this.gotoOrders（）；
//if（this.modal&&this.modal.index==0）{
//this.modal.discouse（）；
//}其他{
///*退出应用程序，因为这是主/第一个选项卡*/
//this.platform.exitApp（）；
////this.navCtrl.setRoot（另一页）；Ionic 2不使用角度路由器..但路由器工作正常。唯一的问题是检测路由并在“后退”按钮按下事件中发挥作用。从未尝试过..但是如果您使用路由器，则可能连“后退”按钮都应该使用路由器而不是链接帖子所建议的导航…也许您应该查找angular2 sol
this.navCtrl.setRoot（另一页）
是导航控制器而不是路由器。我已经在使用Angular2。Ionic 2不使用角度路由器。但路由器工作正常。唯一的问题是在按下后退按钮事件期间检测路由和功能。从未尝试过。但是，如果您使用路由器，那么可能连back按钮也应该使用路由器而不是链接帖子所建议的导航。…也许你应该找angular2 sol
这个。navCtrl.setRoot（另一页）
是导航控制器而不是路由器。我已经在使用angular2了。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Platform, AlertController, LoadingController } from 'ionic-angular';
import { User } from '../../models/User';
import { Order } from '../../models/Order';
import { UserService } from '../../providers/UserService';
import { OrderService } from '../../providers/OrderService';

@Component({
  selector: 'page-Orders',
  templateUrl: 'Orders.html'
  // providers: [UserService, OrderService],
})
export class Orders implements OnInit {
  orders: Order[];
  selectedOrder: Order;
  user: User;
  error: any;
  showFilter: boolean;
  Search: any;
  loading: any;

  constructor(public router: Router,
    public userService: UserService,
    public orderService: OrderService,
    public platform: Platform,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController) {
    this.showFilter = false;
    this.Search = '';
  }

  ngOnInit() {
    if (localStorage.getItem('User') == null) {
      this.router.navigate(['/Login']);
    }
    else {
      this.userService.user = JSON.parse(localStorage.getItem('User'));
      this.getOrders();
    }
  }

  backButtonAction() {

  }
}

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Platform, AlertController, LoadingController } from 'ionic-angular';
import { User } from '../../models/User';
import { Order } from '../../models/Order';
import { UserService } from '../../providers/UserService';
import { OrderService } from '../../providers/OrderService';

@Component({
  selector: 'page-OrderDetails',
  templateUrl: 'OrderDetails.html'
})
export class OrderDetails implements OnInit {
  modal: any;
  @Input() order: Order;
  @Output() close = new EventEmitter();
  user: User;
  loading: any;
  isStaff = this.userService.user.Role == "STAFF";
  navigated = false; // true if navigated here

  constructor(public router: Router,
    private route: ActivatedRoute,
    public userService: UserService,
    public platform: Platform,
    public orderService: OrderService,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController) {
    this.platform.registerBackButtonAction(this.backButtonAction, 10);
  }

  ngOnInit() {
    if (this.userService.user == null) {
      this.userService.logout();
    }
    else {
      this.route.params.forEach((params: Params) => {
        if (params['orderid'] !== undefined) {
          let orderid = params['orderid'];
          this.navigated = true;
        }
      });
    }
  }

  backButtonAction() {
    console.log('backButtonAction called');
    this.gotoOrders();
    // if (this.modal && this.modal.index === 0) {
    //   this.modal.dismiss();
    // } else {
    //   /* exits the app, since this is the main/first tab */
    //   this.platform.exitApp();
    //   // this.navCtrl.setRoot(AnotherPage);  <-- if you wanted to go to another page
    // }
  }

  gotoOrders(): void {
    this.router.navigate(['/Orders']);
  }
}