Question

如何阻止在回溯导航中调用ActivatedRoute.queryParams.subscribe？

问题发生的平台

iOS iOS 11 ipad mini2
iphone 6 plus，
本国游乐场

以下版本号：

tns-core-moduels 4.2.0
tns-ios 4.2.0
angular / compiler-cli 6.1.2
角/路由器6.1.2
本机角度6.1.0

复制它的步骤： 共有3页：主页，实体，联系方式。它们是根级页面，并使用page-router-outlet

在主页上，点击按钮，转到参数ID = 1的实体页面

this.routerExtensions.navigate(['/entity'],
        {
            queryParams: {
                id: '1'
            }
        }
    );

在实体页面中，点击另一个按钮，进入参数id = 2的联系页面

 this.routerExtensions.navigate(['/contact'],
        {
            queryParams: {
                id: '2'
            }
        }
    );

在联系页面中，点击左上角的系统后退按钮以返回实体页面

期望结果：在实体页面中，不应在向后导航中调用router.queryParams.subscribe并显示实体页面而无需进行任何刷新。

export class EntityComponent implements OnInit {
...
ngOnInit(): void {

    //if it's from Home page, that's OK;  
    //but how to stop it to be called on navigating back? 
    this.router.queryParams.subscribe(params => {
    console.log("EntityComponent queryParams with id : " + params.id);

    //To refresh page on regular navigating using id = 1.  
    //On back navigation, the page shouldn't be refreshed.

        });
}

实际结果： 使用参数id = 2（联系页面ID）调用this.router.queryParams.subscribe

代码： https://play.nativescript.org/?template=play-ng&id=SgrzAJ&v=9

顺便说一句，{t {3}}中的@tsonevn建议解决方案不起作用，这行：

this.router.queryParams.unsubscribe（）;

甚至在操场上都有编译问题。 this.router.queryParams没有“取消订阅”方法。

entity.component.ts

当您导航到另一个页面时，我建议退订this.router.queryParams，并在进入EntityComponent时再次订阅它。例如：

onButtonTap(): void {
     this.router.queryParams.unsubscribe();
    console.log("Entity Button was pressed, go to contact Page with id = 2");
    this.routerExtensions.navigate(['/contact'],
        {
            queryParams: {
                id: '2'
            }
        }
    );
}

Answer 1

OP解决方案。

由于@tsonevn，他在tutorial中更新了解决方案，现在可以使用。

新代码演示： javadoc

基本上，这一行可以通过点击按钮离开页面来工作。

this.subs.unsubscribe();

但是，实际情况可能更复杂。例如：实体页面中有3个子组件，每个人都有一个导航到联系人页面的按钮。我们需要将'this.subs'传递给子组件，并保留3个位置来执行'unsubscribe（）'。

如何在一个地方做到这一点？

Router Guard' CanDeactivate '是注入它的好方法。

步骤：

创建一个can-deactivate-guard.ts，在停用页面上调用“ component.unsubscribeQueryParams”方法

export class CanDeactivateGuard implements CanDeactivate<any> {
canDeactivate(component: any, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (component.unsubscribeQueryParams()) {
        return true;
    } else {
        return false;
    }
}

}

将其放入“ entity-routing.module.ts”

const routes: Routes = [
{ path: "entity", component: EntityComponent, canDeactivate: [CanDeactivateGuard] }];

在“ entity.component.ts”中实现方法“ unsubscribeQueryParams”

unsubscribeQueryParams() {
if (this.subscription) {
    //be called by CanDeactivateGuard.canDeactivate() on leaving this page.
    this.subscription.unsubscribe();    
}       
return true; }

将“ can-deactivate-guard”注册到“ app.module”。

使用'CanDeactivate'的另一个原因是与page-router-outlet一起使用，前进时不会调用当前页面的'ngOnDestroy'方法，因此不将this.subscription.unsubscribe（）放在'ngOnDestroy'中工作。

来自Nativescript文档：

使用page-router-outlet向前导航时，当前页面和视图将保存在本机导航堆栈中。相应的组件不会被破坏。已缓存。

有关更多信息，请检查github

此问题已解决。

如何停止在向后导航中调用ActivatedRoute.queryParams.subscribe？

1 个答案: