2

I've been following some courses and reading through various blogs covering of Routing in Angular 2. The goBack method on the Location service is one way a user can navigate to a previously viewed page (along with the browser's back button).

My question is, what can be done to prevent the user leaving the application itself. The Routing tutorial suggests the use of the CanDeactive guard. I've done some reading on this but haven't been able to understand the concept fully.

For example, I could have a simple component that includes the goBack() method. What would be the best method to prevent the user for leaving the application (through the use of the goBack method) by disabling the goBack method, while also considering they may not always enter the application on the same point. If that makes sense.

import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <h2>Angular Routing</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet ipsum massa, eget vulputate risus blandit sed. Vestibulum ullamcorper leo sagittis massa aliquet mattis.</p>

    <button (click)="goBack()">&#10094;&#10094; BACK</button>

    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor (
    private _location: Location,
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

  goBack(): void {
    this._location.back();
  }

}

This may not be possible but it has got me thinking.

bmd
  • 1,231
  • 3
  • 15
  • 23
  • http://stackoverflow.com/questions/40468267/angular-2-does-ngondestroy-get-called-on-refresh-or-just-when-navigate-away-fr/40468409#40468409, http://stackoverflow.com/questions/37642589/how-can-we-detect-when-user-closes-browser/37642657#37642657 – Günter Zöchbauer Feb 14 '17 at 17:32
  • Thanks, @GünterZöchbauer. After reading those two questions it does not sound as though you can achieve exactly what I am after, but it still does help to provide some further knowledge. – bmd Feb 16 '17 at 12:08
  • Sorry, the first link wasn't actually what I wanted to post. I meant `CanDeactivate`. The 2nd is about leaving a page. I'd expect it to fire on back-navigation but haven't tried it. – Günter Zöchbauer Feb 16 '17 at 12:20

1 Answers1

0

I am working on Angular 8 / 9 now. For me works:

close_button() {
    if (window.history.length > 1) { //<--If Tab was opened by a Link
        this._location.back()
    } else {
        this._router.navigate(['/']); //<-- Set target here
        console.log("go to home")
    }
}

Also you can deactivate your Button with 

<button (click)='close_button()' [disabled]="this.router.url === '/topPath'">Back</button>

to prevent leaving the homescreen

Janick Koder
  • 54
  • 8
  • `window.history.length` didn't work for me. When I went from (e.g.) gmail via a link to my NG app, the length was already more then one. I found that `window.history.state.navigationId` did work. The navigationId is always 1 when you hit the the first page of the NG app. `if (window.history.state.navigationId > 1) { // If view was opened by a link from the app this.location.back() } else { // Go to home screen this.router.navigate(['/']); }` – pberden Feb 24 '21 at 08:23