关于问题标题,我已经在Angular 5中编写了一个实现来实现这一点,但是我没有使其工作。
https://stackblitz.com/edit/angular-nhtgbr
想法是每当用户在浏览器中点击后退或前进时,应用程序能够检测到URL更改并更新内容(如果仍在同一组件中)。
import { Component, OnInit } from '@angular/core';
import { Location, PopStateEvent } from '@angular/common';
import { ActivatedRoute, Event, NavigationEnd, Router } from '@angular/router';
@Component({
selector: 'app-dashboard',
template: 'Read in console'
})
export class DashboardComponent implements OnInit {
page: number = 1;
constructor(private router: Router,
private activatedRoute: ActivatedRoute,
private location: Location) { }
ngOnInit() {
this.detectPopState();
setTimeout(() => this.goToPage(1), 1000);
setTimeout(() => this.goToPage(2), 2000);
setTimeout(() => this.goToPage(3), 3000);
setTimeout(() => this.goToPage(4), 4000);
setTimeout(() => window.history.back(), 5000); // will trigger location PopStateEvent
setTimeout(() => window.history.back(), 6000); // Trigger twice! Expected to trigger only once
setTimeout(() => window.history.back(), 7000); // Trigger 3 times!
}
detectPopState() {
this.location.subscribe((popStateEvent: PopStateEvent) => {
// Detect popstate
if (popStateEvent.type === 'popstate') {
const eventSubscription = this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationEnd) {
this.page = this.activatedRoute.snapshot.queryParams.page;
this.updateContent();
}
});
}
});
}
updateContent() {
console.log('Update content ' + this.page);
}
goToPage(page: number) {
this.page = page;
this.router.navigate(['/dashboard'], {
queryParams: {
page: this.page
}
});
this.updateContent();
}
}
问题在这里:
setTimeout(() => window.history.back(), 6000); // Trigger twice! Expected to trigger only once
setTimeout(() => window.history.back(), 7000); // Trigger 3 times!
我知道updateContent()
由于PopStateEvent的多个订阅而被累计触发,但我仍在努力寻找解决方法以实现我想要的行为。