时间戳

首页 > 解决方案 > Angular 6 - 多次按下后退按钮触发

javascript - Angular 6 - 多次按下后退按钮触发

问题描述

我有以下代码来检测使用角度 6 的后退按钮按下。

import { Location } from '@angular/common';
export class ProductsComponent implements OnInit {

constructor( private location: Location){
  this.handleBackButtonPress();
}
  handleBackButtonPress() {
    this.subscribed = true;
    this.location.subscribe(redirect => {
     if (redirect.pop === true) {
      alert('this is a backbutton click');
     }
    });
  }
}

这是有效的，我们在按下后退按钮时收到警报。问题是如果我们多次访问同一个页面，它将触发警报，并显示我们访问具有相同组件的路由的次数。

注意：我已经检查过类似的解决方案this.location.unsubscribe()，但找不到类似的功能location。

标签： javascriptangulartypescript

解决方案

当组件被ngOnDestroy生命周期钩子销毁时，您只需要取消订阅。

import { Location } from '@angular/common';
import { SubscriptionLike } from 'rxjs';

export class ProductsComponent implements OnInit, OnDestroy {

  public subscription: SubscriptionLike;

  constructor(private location: Location){
    this.handleBackButtonPress();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  handleBackButtonPress() {
    this.subscription = this.location.subscribe(redirect => {
      if (redirect.pop === true) {
        alert('this is a backbutton click');
      }
    });
  }
}

正如briosheje在评论中提到的那样，生命周期挂钩不会在浏览器刷新时运行。为此，您需要处理文档onbeforereload事件的取消订阅。

推荐阅读