How to redirect to the pages on back button click of different components in angular2?

Question

I have 3 pages to implement this scenario.

Currently,

1. If I go to the first page and, click to navigate to the 2nd page. And then, on the 2nd page, I click the back button. It works fine (ie, Navigates to 1st page).

2. Now, from 1st page, I go to the second page and, click to navigate to the 3rd page. And then, in the 3rd page, I click on back button, it redirects to the 2nd page as expected.

Now if I click on the back button on the second page, it goes to the 3rd page again. Where I want that to be redirected to the 1st page.

Here, actually according to code, it is working fine but my requirement is that

1. i have 2 pages company and companyApp where both pages have same guide and pin pages.. So, i want the guide page to redirect to company page, if i had been to guide page from company page even though guide page has been and come from images page.

2. If i had been to guide page from compnay app page then it must redirect to company app page even though it is again directed to images page and all.

So, can anyone help me to solve this:

TS:

// 1st Page:
goToGuide1(company){
  this.router.navigate(['/guide',company.user._id]);
}

// 2nd page:
import {Location} from '@angular/common';
constructor(private _location: Location) {}
goToCompany1() {
  this._location.back();
}

goImg(guide) {
  this.router.navigate(['/guideimg', guide._id]);
}

// 3rd page
goToGuide1() {
  this.router.navigate(['/guide',this.user_id])
}

Here on the 2nd page: If I go to the Image page and click on back button, it comes to the guide page but doesn't go to the 1st page.

Answer 1

Reason for the behavior: It is happening because of the 3rd page is stored in the location attribute.

Angular API documentation states that,

"Note: it's better to use Router service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing."

The possible solution for your issues are,

1. Write a service which saves the whole user navigation history into a data structure and also to retrieve it when we need it.

2. Append the redirecting state through query parameters so that, using a conditional you can check that on the current page.

I'd possibly go with the option 1 if I have the same behavior several times in my entire application. but here the 2nd option would do.

While redirecting from any of the pages add the page detail into the queryParams and redirect.

Ex - If that's from the company page,

[routerLink]="['/guide', <anyId>]" [queryParams]="{from: 'company'}"

 or

goToGuide1(company){
  this.router.navigate(['/guide',company.user._id], { queryParams: { 'from': 'company' } });
}

So when you redirect to back you can check with a conditional and redirect back.

// Import
import { ActivatedRoute } from '@angular/router';

// Inject
constructor(
  private route: ActivatedRoute
) {
  // store the previous state
  this.route.queryParams.subscribe(params => {
    this.redirectedFrom = params['from'];
  }
}

// check the condition while redirect
goToBackState() { // can go as goToCompany
  if (this.redirectedFrom === company) {
    // redirect to company
  } else {
    // otherwise redirect to companyApp
    // Please note that you can check for the companyApp as well.
  }
}

It is all about how you handle the conditional logic and overall logic as well. If you identify those and do it right, Then it should work as it is expected.

Answer 2

We use the benifits of localStorage and store the current Component and redirect accordingly,

Since you have,

{ path: 'company', component: CompanyComponent, canActivate:[AuthGuard] },
{ path: 'companyapp', component: CompanyAppComponent, canActivate:[AuthGuard] }

In Company Component:

goToGuide(company){
  this.localStorage.store('oldroute', 'company')
  this.router.navigate(['/guide',company.user._id]);
}

in companyApp Component:

goToGuide(company){
  this.localStorage.store('oldroute', 'companyapp')
  this.router.navigate(['/guide',company.user._id]);
}

In Guide Component,

goToCompany() {
  if(this.localStorage.retrieve('oldroute') && (this.localStorage.retrieve('oldroute') == 'companyApp'))
  {
    this.router.navigate(['/companyApp']);
  }else{
    this.router.navigate(['/company']);
  }
}