Javascript 触发路由器事件时更改导航

我想在导航开始后更改目的地路线。 我正在使用angular创建一个应用程序，如果用户单击浏览器后退按钮，我会将用户导航更改为主页。在我的app.component中，我检查了导航，但路由器导航没有启动：

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

这是在触发路由器事件后更改目标路由的一种方法吗？
更新：
我的批准模块包含：

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 { }

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

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

....
export class HomeRoutingModule { }

以及我的示例NotificationRoutingModule：

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

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

....
export class NotificationRoutingModule { }

我的HomeRoutinModule包含：

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 { }

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

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

....
export class HomeRoutingModule { }

我想，如果用户在按下浏览器导航键后进入导航（“通知”），我将更改下一个导航，不管它是什么，导航更改为类似“主页”的内容

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.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
      }
  });
}

}

然后侦听窗口对象上的popstate

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

---

我在本地复制了您的代码，并进行了更改，我希望这能起作用。

路由器导航方法将数组作为命令，将对象作为附加对象（NavigationExtras interface）。并且NavigationExtras接口的属性为replaceUrl

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

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

用于替换当前状态。然后我将代码更改为：

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

---

将Html component.Html放置为

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

组件.ts方法

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

---

导航url不变。您可以共享您的整个组件代码吗？（仅ts文件）我花时间复制了您的代码，我使用了与您使用的相同的概念，只需更改

路由器。导航['\home']与路由器连线。导航（['/home']）并且应该可以工作，因为它已经过测试。非常感谢。但当你在路由器中时，它不会更改url。我发现，如果我想在订阅路由器时更改路由器url，我应该在附加功能中调用replaceUrl，如：Router.navigate（['home']，{replaceUrl:true}）；
Home() {
  this.router.navigateByUrl('');
}