javascript - Angular 6 - Back button press trigger more than once - Stack Overflow

I have the following code to detect the back button press using angular 6.import { Location } from 

I have the following code to detect the back button press using angular 6.

import { Location } from '@angular/mon';
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 is working and we got alert on back button press. The problem is If we visit the same page more than once it will trigger the alert with the number of time we visited the route with the same ponent.

Note: I have checked for a solution like this.location.unsubscribe(), But failed to find a function like that for location.

I have the following code to detect the back button press using angular 6.

import { Location } from '@angular/mon';
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 is working and we got alert on back button press. The problem is If we visit the same page more than once it will trigger the alert with the number of time we visited the route with the same ponent.

Note: I have checked for a solution like this.location.unsubscribe(), But failed to find a function like that for location.

Share Improve this question edited Apr 8, 2019 at 13:17 labu4bd 7015 silver badges13 bronze badges asked Apr 8, 2019 at 13:04 Shijin TRShijin TR 7,78811 gold badges63 silver badges125 bronze badges 1
  • About unsubscribing: stackoverflow./questions/48729990/… . About the solution: you should unsubscribe when the event onbeforeunload of the browser is fired. Otherwise, ngOnDestroy won't be called, because it's not directly angular destroying the ponent. – briosheje Commented Apr 8, 2019 at 13:16
Add a ment  | 

2 Answers 2

Reset to default 5

You just need to unsubscribe when the ponent is destroyed by the ngOnDestroy lifecycle hook.

import { Location } from '@angular/mon';
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');
      }
    });
  }
}

As mentioned by briosheje in the ments the lifecycle hook does not run on browser refreshes. For that you'll need to handle the unsubscription on the document's onbeforereload event.

The problem, I analyzed here is, every time whenever constructor will run. It will call your function for sure. So you have to check whether this function has been run previously or not. Simplest answer is

constructor( private location: Location){
 const PopCalled = localStorage.getItem('PopCalled')
 if(!PopCalled)
  this.handleBackButtonPress();
}

handleBackButtonPress() {
 this.subscribed = true;
  this.location.subscribe(redirect => {
  if (redirect.pop === true) {
  localStorage.setItem('PopCalled', true);
  alert('this is a backbutton click');
  }
 });
}

Basically, you have to manage the state of PopCalled its up to you which way you want to choose, as per my knowledge this is the simplest way.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745542861a4632207.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信