在 location.onPopState() 回调中更改组件属性

我试图在组件中设置一个标志，以了解用户单击浏览器的“上一页”按钮是否加载视图。

当在组件中定义时，“fromBackButton”属性设置为 false。

在构造函数中我有这样的代码：

this.location.subscribe((popStateEvent: PopStateEvent) => {
  // Detect popstate
  if (popStateEvent.type === 'popstate') {
    this.fromBackButton = true;
  }
});

如果我将 console.log(this.fromBackButton) 放入 ngOnInit 或任何其他方法中，则该值为 False。

我尝试过使用

this.changeDetectorRef.markForCheck();

and

this.changeDetectorRef.detectChanges();

将标志设置为“True”后，还尝试使用 ngZone.run()，但我得到了相同的结果

问题在于该组件在导航时被重新初始化。所以fromBackButton字段设置为true返回并在新组件初始化时立即重置为 false。

因此，您需要创建一个服务来获取能够在导航周期中“生存”的内容。我的意思是这样的（堆栈闪电战在这里 https://stackblitz.com/edit/angular-ivy-gu5zdq):

export class NavigationStateService implements OnDestroy {
  private _isFromBackButton = false;

  private locationSubscription: SubscriptionLike;

  constructor(private location: Location) {
    this.locationSubscription = this.location.subscribe((popStateEvent: PopStateEvent) => {
      // Detect popstate
      if (popStateEvent.type === 'popstate') {
        console.debug('fromBackButton NavigationStateService', popStateEvent);
        this._isFromBackButton = true;
      }
    });
  }

  get isFromBackButton(): boolean {
    return this._isFromBackButton;
  }

  clearFromBackButtonState() {
    this._isFromBackButton = false;
  }

  ngOnDestroy(): void {
    this.locationSubscription.unsubscribe();
  }
}

对应的组件示例：

export class Page1Component implements OnInit {
  fromBackButton = false;

  constructor(private navigationStateService: NavigationStateService) { }

  ngOnInit(): void {
    this.fromBackButton = this.navigationStateService.isFromBackButton;
    this.navigationStateService.clearFromBackButtonState();
  }
}

但美中不足的是PopState Event：向前和向后导航时同等触发。但这是另一项任务。也许这里是一个很好的起点：如果 popstate 事件来自 HTML5 Pushstate 的后退或前进操作，如何检索？ https://stackoverflow.com/questions/8980255/how-do-i-retrieve-if-the-popstate-event-comes-from-back-or-forward-actions-with