1

我已经按照这里的建议在我的 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) 订单.ts

在订单页面中，如果我单击后退按钮，它将调用 app.component.ts 中的函数，其中我将“activeView”作为未定义的let activeView = nav.getActive();行。所以，我得到“activeView is null”打印在控制台中。（如第一个解决方案中所述）。请看这张图片。

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() {

  }
}

4) OrderDetails.ts

在 OrderDetails 页面中，如果我单击后退按钮，它将调用 OrderDetails.ts 中的函数，因为我正在覆盖 app.component.ts 的方法 （如这里this.platform.registerBackButtonAction(this.backButtonAction, 10);的第二个解决方案中所述）。我也在控制台日志中收到“backButtonAction called”。但它给了我在线错误。它在“this”中找不到 gotoOrders() 函数。在调试窗口中，我展开了“this”，但在那里看不到 gotoOrders() 函数。请看这张图片。this.gotoOrders();

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']);
  }
}
4

0 回答 0