此项目示例中显示的问题:https://github.com/rrcoolp/test-router-app/
导航失败:我创建这个测试项目是为了解决带有路由器3.0.0-阿尔法.7 的NATIVESCRIPT ANGULAL 2(RC3)NATIVESCRIPT的问题
问题很简单,第一次导航后导航到另一个页面失败。要查看实际问题,请执行以下步骤:
-
点击任何按钮(GOTO PAGE 1或GOTO PAGE 2):第一次点击相应页面后,其内容将呈现
-
任何后续点击任一按钮(包括儿童组件)都会在导航中失败
任何帮助都将不胜感激。。。
以下是我的APP_COMPONENT文件示例:
import {Component, OnInit, ChangeDetectorRef} from "@angular/core";
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
import {APP_ROUTER_PROVIDERS} from "./app.routes";
import {Location, LocationStrategy} from "@angular/common";
import {app_globals} from "./utils/globals";
@Component({
selector: "main",
directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
providers: [APP_ROUTER_PROVIDERS],
templateUrl: "masterpage.html"
})
export class AppComponent implements OnInit {
showBackButton: boolean = false;
history: any = [];
pushState: any;
constructor(public _router: Router, private _changeDetectionRef: ChangeDetectorRef, private _Location: Location, private _LocationStrategy: LocationStrategy, private _app_globals: app_globals) {
this._changeDetectionRef = _changeDetectionRef;
this._LocationStrategy = _LocationStrategy;
}
ngOnInit() {
this._app_globals.navigateTo$.subscribe(val => {
console.log("SUBSCRIBED NAVIATE TO:" + val);
this.navigateTo(val);
});
}
goBack() {
this._LocationStrategy.back();
}
navigateTo(page) {
console.log("GotoTestPage"+page);
this._router.navigate(["testpage"+page, "PAGE"+page]).then(() => {
alert("Route Completed but see content didn't change to PAGE"+page);
});
}
GotoTestPage2() {
this.navigateTo("2");
}
GotoTestPage1() {
this.navigateTo("1");
}
}
通过在导航方法中指定绝对路径(添加前导"//strong>")使其工作:
this._router.navigate(["/testpage"+page, "PAGE"+page]).then(() => { ... });