Question

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

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

    ])
  ],
  exports: [NativeScriptRouterModule]
})

为了完整性，这里是folder-content.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。

我尝试使用以下代码段打印路由器事件以获取更多信息：

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

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

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')

从文件夹内容+＆＃39; /＆＃39; 导航到文件夹内容+＆＃39; / sdcard＆＃39;后，我得到以下信息：： 的

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')

然而，当按下后退按钮时，我希望从f 旧内容+＆＃39; / sdcard＆＃39; 导航到文件夹内容+＆＃ 39; /＆＃39; 但我会被重定向到＆＃39;＆＃39; （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

Answer 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);
}

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

1 个答案: