Question

我只是在学习nativescript，angular和typescript。我正在使用模拟器开发iOS。我的路由配置如下（从NativeScript检查器复制粘贴）：

config: Array (7)
0{path: "filtered/:topic/:queryText", component: function}
1{path: "abstract/:id", component: function}
2{path: "session/:id", component: function}
3{path: "details/:id", component: function}
4{path: "home", component: function}
5{path: "", redirectTo: "home", pathMatch: "full"}
6{path: "**", redirectTo: "home"}

从home到details的路由使用home.component中的此代码：

showDetails(e){
    console.log(e.index);
    this.router.navigate(["details", e.index]);
}

这大部分时间都有效，但是当我第一次导航到filtered组件，然后使用“返回”按钮返回时，可靠地失败。触发showDetails函数，记录e.index的正确值，但应用程序未路由到details; home页面根本没有变化（但我仍然可以导航到home页面中的其他页面。）

我的问题是，我应该如何解决这个问题？我可以在检查器中看到this.router对象，但它是一个非常复杂的对象，看起来像数百个嵌套属性。我猜我应该尝试找出this.router函数按预期工作时的样子，以及当showDetails不再有效时它会如何变化。但是我应该关注哪些属性？或者我应该看别的东西？

非常感谢任何提示或指导。

更新：每当我导航到两个以上的其他页面时就会出现问题，例如，如果我只是导航到showDetails，则不会发生，但是如果从filtered导航到{{1然后使用后退按钮两次，它总是发生。如果首先导航到filtered然后导航到abstract，然后再导航回session，则相同。

更新2：这里的答案对于调试路由非常有用：

How to detect a route change in Angular 2?

更新3：我明白了。我的路线中的一个参数有时是空的，导致一个带有双斜线的网址：abstract。 Angular似乎不喜欢那样。

Answer 1

尝试这种方式进行路由。

app-routing.module.ts：-

{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", loadChildren: "~/app/home/home.module#HomeModule" },
{ path: "details/:id", loadChildren: "~/app/details/details.module#DetailsModule" },
{ path: "session/:id", loadChildren: "~/app/session/session.module#SessionModule" }

用于重定向到页面：-

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){ }

gotoStartPage() {
 setTimeout(() => {
    this.zone.run(() => {
     this._routerExtensions.navigate(["details", 2], {
        clearHistory: (isIOS) ? true : false,
     });
    });
  }, 500);
}

如何解决nativescript angular中的路由问题？

1 个答案: