让我们假设以下示例以便更好地理解
在app.component.html我们有三个链接：
<nav>
<a routerLink="./section-a">Section A</a>
<a routerLink="./section-b">Section B</a>
<a routerLink="./section-c">Section C</a>
</nav>
<router-outlet></router-outlet>
而在app.component.ts
import { Component } from "@angular/core";
import { Event as NavigationEvent } from "@angular/router";
import { filter } from "rxjs/operators";
import { NavigationStart } from "@angular/router";
import { Router } from "@angular/router";
@Component({
selector: "my-app",
styleUrls: [ "./app.component.sass" ],
template: './app.component.html'
})
export class AppComponent {
// I initialize the app component.
constructor( router: Router ) {
router.events
.pipe(
// The "events" stream contains all the navigation events. For this demo,
// though, we only care about the NavigationStart event as it contains
// information about what initiated the navigation sequence.
filter(
( event: NavigationEvent ) => {
return( event instanceof NavigationStart );
}
)
)
.subscribe(
( event: NavigationStart ) => {
console.group( "NavigationStart Event" );
// Every navigation sequence is given a unique ID. Even "popstate"
// navigations are really just "roll forward" navigations that get
// a new, unique ID.
console.log( "navigation id:", event.id );
console.log( "route:", event.url );
// The "navigationTrigger" will be one of:
// --
// - imperative (ie, user clicked a link).
// - popstate (ie, browser controlled change such as Back button).
// - hashchange
// --
// NOTE: I am not sure what triggers the "hashchange" type.
console.log( "trigger:", event.navigationTrigger );
// This "restoredState" property is defined when the navigation
// event is triggered by a "popstate" event (ex, back / forward
// buttons). It will contain the ID of the earlier navigation event
// to which the browser is returning.
// --
// CAUTION: This ID may not be part of the current page rendering.
// This value is pulled out of the browser; and, may exist across
// page refreshes.
if ( event.restoredState ) {
console.warn(
"restoring navigation id:",
event.restoredState.navigationId
);
}
console.groupEnd();
}
)
;
}
}
还有你的路线数组
RouterModule.forRoot(
[
{
path: "section-a",
component: SectionAComponent
},
{
path: "section-b",
component: SectionBComponent
},
{
path: "section-c",
component: SectionCComponent
}
],
{
// Tell the router to use the hash instead of HTML5 pushstate.
useHash: true,
}
)
当您运行代码并导航Section B并希望返回 A 时：
- 如果单击后退按钮，该事件将作为 popStat 触发
- 如果您使用普通导航（即您单击 A 部分），该事件将被触发为命令式
为了更好地理解，我建议您访问Using Router Events To Detect Back and Forward Browser Navigation In Angular 7.0.4