Angular 6 - кнопка «Назад» нажимает триггер более одного раза
У меня есть следующий код для обнаружения нажатия кнопки «Назад» с помощью angular 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.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам просто нужно отписаться, когда компонент будет уничтожен хуком жизненного цикла 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');
}
});
}
}
Как упоминалось в комментариях Бриошейе, хук жизненного цикла не запускается при обновлении браузера. Для этого вам нужно обработать отмену подписки на событие onbeforereload документа.
Разумный ответ, хотя нгондестрой не будет вызываться для обновить. Лучше прослушать событие onbeforeunload с помощью HostListener и вместо этого отписаться там, мне.
Остерегайтесь обновлений браузера: P
@briosheje Очень интересно. Не знал, что подписки могут сохранять перезагрузку браузера для некоторых браузеров. Я включил ваш вклад в свой ответ :)
@briosheje Спасибо, что помните. На самом деле это не было проблемой.
@Daniel на самом деле, цикл angular разрушать никогда не вызывается при обновлении (что вводит в заблуждение, поскольку «уничтожить» с семантической точки зрения следует вызывать всякий раз, когда компонент эффективно уничтожается ...). Обычно это вообще не влияет на какое-либо программное обеспечение, поскольку большинство приложений построены так, чтобы фактически работать из любого состояния, из которого исходит страница... Однако конкретно в этом случае это может немного повлиять на общий цикл. В любом случае, спасибо, что упомянули об этом выше.
Проблема, которую я проанализировал здесь, заключается в том, что каждый раз, когда запускается конструктор. Он точно вызовет вашу функцию. Таким образом, вы должны проверить, была ли эта функция запущена ранее или нет. Самый простой ответ
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');
}
});
}
По сути, вы должны управлять состоянием PopCalled, это зависит от вас, какой способ вы хотите выбрать, насколько мне известно, это самый простой способ.
Об отписке: stackoverflow.com/questions/48729990/… . О решении: вы должны отписаться, когда запускается событие перед выгрузкой браузера. В противном случае
ngOnDestroyне будет вызываться, потому что это не прямое угловое уничтожение компонента.