angular - 在 Angular 8 中获取以前和当前的 URL

Question

我想获取以前和当前的 URL 以在 Angular 8 中设置变量 prevUrl 和 currentUrl。
我有两个组成部分。 StudentComponent 和 HelloComponent 。
当我从 HelloComponent 导航到 StudentComponent

在StudentComponent构造函数中prevUrl和currentUrl有值
但是当我点击 showUrl 按钮然后在浏览器的控制台中显示
prevUrl 未定义
currentUrl 未定义

我该如何解决这个问题？为什么构造函数中的prevUrl和currentUrl有值，button中没有值？

学生部分:

prevUrl:string;
currentUrl:string;
 constructor(private router: Router, private route: ActivatedRoute) {

    this.router.events
            .pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
            .subscribe((events: RoutesRecognized[]) => {
                this.prevUrl = events[0].urlAfterRedirects;
                this.currentUrl = events[1].urlAfterRedirects;
                console.log('this.prevUrl constructor', this.prevUrl);
                console.log('this.currentUrl constructor', this.currentUrl);
            });

 }

按钮:

showUrl = ()=>{

    console.log('prevUrl',this.prevUrl);
    console.log('currentUrl',this.currentUrl);
  }

stackblitz

Answer 1

像这样尝试:

this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {        
        this.prevUrl = this.currentUrl;
        this.currentUrl = event.url;
      };
 });

现场演示: https://stackblitz.com/edit/angular-route-event-hr2xsc