【Angular笔记】解决Angular路由跳转出现的残影问题

在开发Angular后台项目时，点击浏览器上的“前进”“后退”，常常会出现无法立即跳转，而出现残影的问题（如下图）。找遍全网也没找到合适的解决方案，故记录下来。

src\app\app.component.ts

import { Component, NgZone, ChangeDetectorRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent {
  constructor(
    private ws: WaterMarkService,
    public ngZone: NgZone,
    public router: Router,
    public cdr: ChangeDetectorRef
  ) {
    // 路由跳转结束订阅 解决路由跳转出现的残影问题
    this.routerSub = this.router.events
      .pipe(filter((e) => e instanceof NavigationEnd))
      .subscribe(() => {
        this.ngZone.run(() => {
          this.cdr.detectChanges();
        });
      });
    this.ws.watermarkInit();
  }
  routerSub!: Subscription;
}