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 (i.e, 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

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']);
  }
}