时间戳

首页 > 解决方案 > Angular：如何在调用 ngOnDestroy 之前检查 queryParams 的变化

javascript - Angular：如何在调用 ngOnDestroy 之前检查 queryParams 的变化

问题描述

我想ngOnDestroy根据当前路线的变化有条件地执行一些代码。

Route 从/foo变为/login?logout=true，并且这个变化是在 Foo 组件之外触发的。

在ngOnInit我订阅 queryParam 更改，以正确更新loggingOut标志。

我的问题是，ngOnDestroy在 queryParam 的下一个处理程序之前调用它，所以它的loggingOut值不正确。

export class FooComponent implements OnInit, OnDestroy {
    
    loggingOut = false;

    constructor(private route: ActivatedRoute) {}

    ngOnInit(): void {
        this.route.queryParamMap.subscribe(queryParams => {
            this.loggingOut = queryParams.get('logout') === 'true';
        });

    }

    ngOnDestroy(): void {
        if (this.loggingOut) {
            // do this
        } else {
            // do that
        }
    }
}

似乎这是生命周期 POV 的预期行为，所以有以下问题：

如果可能，请添加指向文档的链接，描述如何ngOnDestory针对导航更改调用生命周期钩子（尤其是 ）？

谢谢。

标签： javascriptangulartypescriptangular2-routing

解决方案

我的问题是，在 queryParam 的下一个处理程序之前调用 ngOnDestroy

componentDestroyed = false;

ngOnInit(): void {
    this.route.queryParamMap.subscribe(queryParams => {
        if (!this.componentDestroyed)
            this.loggingOut = queryParams.get('logout') === 'true';
        else {
           // Do here what you wanted to do in ngOnDestroy
        }
    });

}

ngOnDestroy(): void {
    this.componentDestroyed = true;
}

这会解决你的问题吗？

推荐阅读