在NativeScript / Angular应用程序中使用skipLocationChange会导致“跳过的位置”在屏幕上短暂显示

Question

我使用onItemTap（）事件路由到名为“comdataApproval”的新详细信息组件。用户完成某些操作后，会将它们导航回“主组件”。我不希望用户在从中重定向后能够导航回此详细信息组件。我使用skipLocationChange: true来尝试实现这一目标。

当他们单击主组件上的后退按钮时，它会执行您期望的操作，并在访问“主组件”之前将其导航到他们所在的组件。但是，在此过程中，'comdataApproval'组件在屏幕上显示一段短暂的时间（不到一秒），然后用户导航到正确的组件。

 constructor(private router: RouterExtensions, private activatedRoute: ActivatedRoute, private comdataService: ComdataService) {
    // Use the component constructor to inject providers.        
}

  onItemTap(args){                    
    let navigationExtras : NavigationExtras ={
        queryParams: {
            index: args.index,
            comdataRecords: JSON.stringify(this.comdataRecords)
        },
        skipLocationChange: true
    };

    this.router.navigate(["/comdataApproval"], navigationExtras);        
}

导航回主组件。

 .then(() => {
         //do routing here
         this.router.navigate(["/comdata"]);
    });

我不确定为什么要显示这个组件。这就像应用程序导航到详细信息组件，然后导航回历史记录中的正确组件。有没有办法阻止这种短暂的“暂停”发生？

编辑：示例导航：

homePage - > comdataPage - > comdataApproval - > comdataPage

从这里可以按下后退按钮。如果按下它应该转到homePage，而不是comdataApproval页面。但是，当它被按下时，它会转到comdataApproval页面，然后转到homePage而不是直接转到homePage。

Answer 1

首先，你必须隐藏默认的NavigationButton并放置你自己的ActionItem看起来像一个后退按钮。在Android上，您还必须收听activityBackPressed事件并取消后退导航。

然后当用户点击你的comdata（自定义后退按钮）时，导航到clearHistory，true标志设置为ActionItem。对于Android，您还必须在activityBackPressed事件中执行相同的操作，以便在各个平台上保持完整的行为。

this.router.navigate(["/comdata"], { clearHistory: true });

Answer 2

我想出了一个在我的情况下对我有用的解决方案，希望它可以帮助别人。

导航：homePage - > comdataPage - > comdataApproval - > comdataPage

我的问题是从comdataApproval到comdataPage我需要从API重新加载内容。这就是我直接路由并在之前的路由中使用skipLocation的原因。为避免暂停问题并重新加载内容，我使用了以下代码：

comdataApproval：

this.router.backToPreviousPage();

comdataPage：

 this.page.on('navigatingTo', (data) => {
        if(data.isBackNavigation)
            this.ngOnInit();    
      }     
    )

然后在ngOnInit中我调用我的API。我仍然不知道为什么在使用skipLocation时发生了暂停问题。

另外，我无法使用另一个答案中建议的clearHistory，因为当用户按下应用程序时会关闭而不是预期的导航到前一页。