i want to change destination route after navigation start. i've creating an app using angular i want if user click browser back button i change user navigation to home page. in my appponent i check navigation but router navigation doesn't fire:

constructor(router: Router) {
router.events.subscribe((val: NavigationStart) => {
      if (val.navigationTrigger === 'popstate') {
        router.navigate['home'];
      }
  });
}

is it a way to change destination route after router events fired?
Update:
my AppRoutingModule contain :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'account', loadChildren: () => import('./account/account.module').then(m => m.AccountModule)  },
  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'notification', loadChildren:() => import('./notification/notification.module').then(x=> x.NotificationModule) }
];

....
export class AppRoutingModule { }

and my For Example NotificationRoutingModule :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotificationComponent } from './notificationponent';
import { ListComponent } from './list/listponent';
import { DetailComponent } from './detail/detailponent';

const routes: Routes = [
  {path: '' ,ponent: NotificationComponent,children: [
    {path: '', redirectTo: 'list', pathMatch: 'full'},
    {path: 'list', ponent: ListComponent},
    {path: 'detail/:id', ponent: DetailComponent}
  ]}
];

....
export class NotificationRoutingModule { }

and my HomeRoutindModule is contain :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './homeponent';

const routes: Routes = [
  {path: '' ,  ponent : HomeComponent},
  {path: 'home' ,  ponent : HomeComponent},
];

....
export class HomeRoutingModule { }

i want if user went to navigation ('notification') after he press browser navigation i change next navigation whatever it was ,navigation change to something like 'home'.

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.sass']
})
export class AppComponent implements OnInit {
constructor(router: Router) {
router.events.subscribe((val: NavigationStart) => {
      if (val.navigationTrigger === 'popstate') {
        // if val.url equal '/notification/list'
        router.navigate['\home'];
        // i tried it but navigation does't changed
      }
  });
}

}

i want to change destination route after navigation start. i've creating an app using angular i want if user click browser back button i change user navigation to home page. in my app.ponent i check navigation but router navigation doesn't fire:

constructor(router: Router) {
router.events.subscribe((val: NavigationStart) => {
      if (val.navigationTrigger === 'popstate') {
        router.navigate['home'];
      }
  });
}

is it a way to change destination route after router events fired?
Update:
my AppRoutingModule contain :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'account', loadChildren: () => import('./account/account.module').then(m => m.AccountModule)  },
  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'notification', loadChildren:() => import('./notification/notification.module').then(x=> x.NotificationModule) }
];

....
export class AppRoutingModule { }

and my For Example NotificationRoutingModule :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotificationComponent } from './notification.ponent';
import { ListComponent } from './list/list.ponent';
import { DetailComponent } from './detail/detail.ponent';

const routes: Routes = [
  {path: '' ,ponent: NotificationComponent,children: [
    {path: '', redirectTo: 'list', pathMatch: 'full'},
    {path: 'list', ponent: ListComponent},
    {path: 'detail/:id', ponent: DetailComponent}
  ]}
];

....
export class NotificationRoutingModule { }

and my HomeRoutindModule is contain :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.ponent';

const routes: Routes = [
  {path: '' ,  ponent : HomeComponent},
  {path: 'home' ,  ponent : HomeComponent},
];

....
export class HomeRoutingModule { }

i want if user went to navigation ('notification') after he press browser navigation i change next navigation whatever it was ,navigation change to something like 'home'.

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.sass']
})
export class AppComponent implements OnInit {
constructor(router: Router) {
router.events.subscribe((val: NavigationStart) => {
      if (val.navigationTrigger === 'popstate') {
        // if val.url equal '/notification/list'
        router.navigate['\home'];
        // i tried it but navigation does't changed
      }
  });
}

}

• javascript
• angular

5 Answers 5

router navigation method give an array as mands and an object as extras object (NavigationExtras interface).and NavigationExtras interface has a property as replaceUrl for replacing the current state whatever it was.then i changed my code to:

constructor(router: Router) {
router.events.subscribe((val: NavigationStart) => {
      if (val.navigationTrigger === 'popstate') {
        // here changed
        router.navigate(['home'], {replaceUrl:true});
      }
  });
}

Place Html ponent.html as

   <input type="button" name="" value="Back"  (click)="Home()" class="btn btn secondary"/>

Place ponent.ts as

import { Router } from "@angular/router";

constructor(private router: Router){}

ponent.ts Method as

Home() {
  this.router.navigateByUrl('');
}

import { HostListener } from '@angular/core';

and then listening for popstate on the window object

@HostListener('window:popstate', ['$event'])
onPopState(event) {
   console.log('Back button pressed');
   // Here write navigation route
}

router.navigate(['/home'])

I replicated your code locally and made a change I hope this works.

    yourFunction {
        this.router.events.subscribe((ev) => {
          if (ev instanceof NavigationStart && ev.navigationTrigger === 'popstate') {
            this.router.navigate(["home"]);
          }
        })
      }

 constructor(...) {
 this.yourFunction()
}