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（）方法），我想回到之前调用过该页面的页面，按住手机背面的按钮时会发生相同的动作。

例如，如果页面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路由器模块

1 个答案: