如何路由后页 - Ionic 4 Angular Router Module

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通过路由模块加载了camenra：

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

和B页一样（不是同时）：

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

在camera.ts代码中，拍照后（takePicture()方法）我想返回页面谁之前调用过此页面，我想执行与按住 phone.

上的后退按钮时相同的操作

例如，如果页面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();
  }
}

如何路由后页 - Ionic 4 Angular Router Module

How to route back page - Ionic 4 Angular Router Module

routing

typescript

ionic-framework

angular

ionic4