Question

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

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

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

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

和我的示例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}
  ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class NotificationRoutingModule { }

我的HomeRoutindModule包含：

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},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

我想如果用户在按浏览器导航后转到导航（“通知”），则无论我将下一个导航更改为什么，导航都将更改为“ home”之类。


@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
      }
  });
}

}

Answer 1

路由器导航方法将数组作为命令，将对象作为Extras对象（ NavigationExtras接口）。并且 NavigationExtras 接口的属性为 replaceUrl > 替换当前状态，然后将代码更改为：

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

Answer 2

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

，然后在窗口对象上侦听popstate

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

Answer 3

router.navigate(['/home'])

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

Answer 4

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

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

Answer 5

将HTML component.html放置为

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

将component.ts放置为

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

constructor(private router: Router){}

component.ts方法为

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

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

5 个答案: