Nativescript后退按钮未重定向到正确的页面

Posted 2023-04-13

【中文标题】Nativescript后退按钮未重定向到正确的页面

【英文标题】：Nativescript Back Button not redirecting to the correct page

【发布时间】：2017-08-02 14:18:22

【问题描述】：

我正在尝试为 android 创建一个 Angular 2 组件，以显示特定 路径 的内容。为此，我创建了以下 app-routing.module：

 @NgModule(
  imports: [
    NativeScriptRouterModule.forRoot([
       path: '', component: HomeComponent ,
       path: 'folder-content/:path', component: FolderContentComponent ,

    ])
  ],
  exports: [NativeScriptRouterModule]
)

为了完整起见，这里是 folder-content.xml 的 xml

<StackLayout>
    <GridLayout row="auto, *" row="2">
        <ListView [items]="getContent(currentPath)">
            <template let-item="item">
                <GridLayout columns="auto, *"   [nsRouterLink]="['/folder-content', item.path]">
                    <GridLayout columns="auto" rows="auto" cssClass="favorite-wrap">
                        <Image id="imgFav" [src]="item.isFile() ? 'res://ic_add_to_fav_1': 'res://folder'" stretch = "none" cssClass="icon-image"></Image>
                    </GridLayout>
                    <StackLayout col="1">
                        <Label [text]="item.name" cssClass="info-bigger"></Label>
                        <Label [text]="item.path" cssClass="info-orange"></Label>
                    </StackLayout>
                </GridLayout>
            </template>
        </ListView>
    </GridLayout>
</StackLayout>

每次点击列表项时，我都想导航到同一页面，但使用不同的参数（这按预期工作）。

问题是当我尝试向后导航（使用物理后退按钮）时，我被重定向到 HomeComponent 而不是 FolderContentComponent。

我尝试使用以下 sn-p 打印路由器事件以获取更多信息：

 router.events.forEach((event) => 
     console.log(event);
    );

当从 默认路径 导航到 文件夹内容 +'/' 作为参数时，我得到以下信息：

JS: NavigationStart(id: 19, url: '/folder-content/%2F')
JS: RoutesRecognized(id: 19, url: '/folder-content/%2F', urlAfterRedirects: '/folder-content/%2F', state: Route(url:'', path:'')  Route(url:'folder-content/%2F', path:'folder-content/:path')  )
JS: NavigationEnd(id: 19, url: '/folder-content/%2F', urlAfterRedirects: '/folder-content/%2F')

从 folder-content +'/' 导航到 folder-content +'/sdcard' 时，我得到以下信息：

JS: NavigationStart(id: 20, url: '/folder-content/%2Fsdcard')
JS: RoutesRecognized(id: 20, url: '/folder-content/%2Fsdcard', urlAfterRedirects: '/folder-content/%2Fsdcard', state: Route(url:'', path:'')  Route(url:'folder-content/%2Fsdcard', path:'folder-content/:path')  )
JS: NavigationEnd(id: 20, url: '/folder-content/%2Fsdcard', urlAfterRedirects: '/folder-content/%2Fsdcard')

但是，当按下后退按钮时，我希望从 folder-content +'/sdcard' 导航到 folder-content + '/'但相反，我被重定向到 '' (HomeComponent)

JS: NavigationStart(id: 21, url: '/')
JS: RoutesRecognized(id: 21, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'')  Route(url:'', path:'')  )
JS: NavigationEnd(id: 21, url: '/', urlAfterRedirects: '/')

值得一提的是，我使用的是 page-router-outlet 而不是标准的 Angular 路由器。

TNS 版本：2.5.1， Angular 版本：2.4.3， Android 平台 6.0.1

【问题讨论】：

你有多少个组件？只有首页，文件夹内容？

我有一个侧边栏组件，关于和联系人组件，以及应用程序组件。除了侧边栏之外，所有这些都只是没有实际功能的虚拟页面

你是否覆盖了android后退按钮事件？

不，因为根据文档，路由器应该支持开箱即用：docs.nativescript.org/angular/core-concepts/…

@RaduCojocari 基于您的实施。就我而言，我已经根据我的要求覆盖了所有 android back 事件

【参考方案1】：

试试这个作为后退按钮。

在您的项目中添加此代码 app.component.ts :-

import * as application from "tns-core-modules/application";

clickCount: number = 0;

constructor() 
 if (application.android)             
  application.android.on(application.AndroidApplication.activityBackPressedEvent, (data: any) => 
            if (this._routerExtensions.router.url == '/home') 
                data.cancel = (this.clickCount++ > 0) ? false : true;
                if (data.cancel) Toast.makeText("Press again to exit", "long").show();
                setTimeout(() => 
                    this.tries = 0;
                , 2000);
            
        );
  

一个页面到另一个页面的重定向代码

import  NgZone  from "@angular/core";
import  isios  from "tns-core-modules/platform";
import  RouterExtensions  from "nativescript-angular/router";

constructor(private zone: NgZone,
    private _routerExtensions: RouterExtensions) 

gotoFolderContentPage() 
    setTimeout(() => 
        this.zone.run(() => 
            this._routerExtensions.navigate(["folder-content",1], 
                clearHistory: (isIOS) ? true : false,
            );
        );
    , 500);