如何在 nativescript angular 中排除路由问题？答案

【问题标题】：How to troubleshoot routing in nativescript angular?如何在 nativescript angular 中排除路由问题？
【发布时间】：2016-11-02 19:58:34
【问题描述】：

我只是在学习 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 对象，但它是一个非常复杂的对象，具有数百个嵌套属性。我猜我应该试着弄清楚当showDetails 函数按预期工作时this.router 的样子，以及当showDetails 不再工作时它如何变化。但是我应该关注哪些属性？还是我应该看看别的？

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

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

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

How to detect a route change in Angular 2?

更新 3：我想通了。我的路由中的一个参数有时为空，导致 URL 带有双斜杠：/filtered//search-term。 Angular 似乎不喜欢那样。

【问题讨论】：

标签： angular nativescript angular2-nativescript

【解决方案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);
}

【讨论】：