如何路由返回页面 - Ionic 4 Angular 路由器模块

Question

我有一个相机页面，该页面由我的应用程序上的其他页面加载。此页面包含相机预览 (camera.ts) 功能：

// camera.ts

import { Component, OnInit } from '@angular/core';
import {CameraPreview, CameraPreviewOptions, CameraPreviewPictureOptions} from '@ionic-native/camera-preview/ngx';
import {Platform} from '@ionic/angular';
import {GlobalDataService} from '../../../services/global-data.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.page.html',
  styleUrls: ['./camera.page.scss'],
 })
export class CameraPage implements OnInit {

  cameraPreviewOpts: CameraPreviewOptions = {
    x: 0,
    y: 0,
    width: window.screen.width,
    height: window.screen.height,
    camera: 'rear',
    tapPhoto: true,
    previewDrag: true,
    toBack: true,
    alpha: 1
   };
   // picture options
   pictureOpts: CameraPreviewPictureOptions = {
    width: 1280,
    height: 1280,
    quality: 85
   };

 constructor(private  router: Router, private cameraPreview: 
      CameraPreview, public platform: Platform, private globalDataService: 
       GlobalDataService) {
         // solve the problem - "plugin not installed".
         platform.ready().then(() => {
         this.openCamera();
      });
  }

selectedImage: any;
  ngOnInit() {
}

openCamera() {
    console.log('open camera');
    // start camera
      this.cameraPreview.startCamera(this.cameraPreviewOpts).then(
        (res) => {
      console.log('cameraPreview.start');
      console.log(res);
    },
    (err) => {
      console.log('cameraPreview.start fails');
      console.log(err);
    });
}

takePicture() {
  console.log('take pinture');
  // take a picture
  this.cameraPreview.takePicture(this.pictureOpts).then((imageData) => {
    this.selectedImage = 'data:image/jpeg;base64,' + imageData;
    console.log('take picture ');
    this.globalDataService.changePictureTaken(this.selectedImage);
    // replace with router to the back page
    // this.router.
  }, (err) => {
    console.log(err);
    this.selectedImage = 'assets/img/test.jpg';
  });
}
cerrarCamara() {
     this.cameraPreview.stopCamera();
}
}

为了更好地解释，有一个 3 页的示例：

1 - 相机页面

2 - 页面 A

3 - 页面 B

页面A通过路由模块加载摄像头：

this.router.navigateByUrl('/camera');

和页面 B 相同（不是同时）：

this.router.navigateByUrl('/camera');

在camera.ts代码中，拍照后（takePicture()方法）我想回到之前调用这个页面的那个页面，我想做与按住手机后键时发生的动作相同。

例如，如果页面A转到相机，一旦进入相机页面，我将拍照，然后我想将我的应用路由回A。如果页面B转到到相机，一旦进入相机页面，我会拍照，然后将我的应用路由回B。

我的意思是我不想制作 router.navigateByUrl 因为我并不总是希望路由同一页面，但它始终是后页。

有没有办法在打字稿中做到这一点？

Answer 1

您可以使用 location.back() 导航到最后一页。

import {Component} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.page.html',
  styleUrls: ['./camera.page.scss'],
 })
class CameraPage {

  constructor(private location: Location) 
  {}

  onBackClicked() {
    this.location.back();
  }
}