主页 / 问题 / 1104074
Accepted
Rakzin Roman
Asked:2020-04-02 01:03:40 +0000 UTC2020-04-02 01:03:40 +0000 UTC

如果用户单击浏览器的后退按钮，则多次触发 Angular 函数

  • 772

当我单击浏览器中的“后退”按钮时，捕捉此事件时，我注意到函数执行的次数更多，与按下后退按钮的次数完全相同，这可能是什么原因？
这是一个例子。我想不通。我用 Angular 编写。

 @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    this.myfunc();  //Функция,скажем,просто выводит текст в консоль, который потом выводится несколько раз
  }

如果是这样，那么同样 

ngOnInit(){
    this.my_func();

    window.onpopstate = (event)=> {
      this.my_func(); //Сейчас эта функция запускается не один, а много раз
    };
  }
javascript

1 个回答

  1. Best Answer

    明确地在现有旧订阅中有一个新订阅。当组件发生变化时，OnInit会再次调用该钩子。有几个选项：一个全局订阅，将按所有路由器事件过滤或使用 hook OnDestroy。无论如何，我建议您使用ActivatedRoute或Location。如果您决定选择带有 的选项OnDestroy，那么订阅 Location 事件就足够了，例如，并将它的 kennel 用于销毁组件：

    private locationSub$: SubscriptionLike; // специфика Location

constructor(private location: Location) { }

ngOnInit() {
    this.locationSub$ = this.location
        .pipe(takeUntil(this.destroy$))
        .subscribe(params => { 
              // logic
         })
}

ngOnDestroy() {
    this.locationSub$.unsubscribe();
}

    请注意，这在很大程度上取决于要执行的操作。在这种情况下，只捕获最后一个路由事件。如果你想通过之前输入的未保存信息中止返回，我建议使用 CanDeactivate 守卫，它可以扩展为停用特定组件。网上有解决办法。

    • 2

相关问题