How to route back page - Ionic 4 Angular Router Module

Question

I have a camera page which is loaded by other pages on my application. This page contains camera preview (camera.ts) functions:

// 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();
}
}

To explain better there is an example for 3 pages:

1 - Camera page

2 - Page A

3 - Page B

Page A loaded the camenra by routing module:

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

And page B makes the same (not at the same time):

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

In the camera.ts code, after take a picture (takePicture() method) I want back to the page who called this page before, I want to do the same action that happens when holding the back buttom on the phone.

For example, if the page A go to camera, once in the camera page, I will take a picture, and then i want to routing back my app to A. And if Page B go to camera, once in the camera page, I will take a picture, and then routing back my app to B.

I mean that I dont want to make a router.navigateByUrl beacause I dont always want route the same page, but its always the back page.

Its there a way to do it in typescript?

Answer 1

You can use location.back() for navigation to the last page.

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();
  }
}