Nativescript Angular router 3.0.0-alpha.7 - 导航失败

时间:2016-07-21 10:45:28

标签: angular router nativescript

此项目示例展示的问题:https://github.com/rrcoolp/test-router-app/

导航失败:我创建了这个测试项目来解决带有路由器3.0.0-alpha.7的NATIVESCRIPT ANGULAR 2(RC3)Nativescript的问题

问题很简单,首次导航后导航到其他页面失败。要查看操作中的问题,请按以下步骤操作:

  1. 点击任意按钮(GOTO PAGE 1或GOTO PAGE 2):首先点击相应的页面,然后呈现内容

  2. 任何后续点击任一按钮(包括CHILD组件)都无法导航

  3. 任何帮助都会赞赏......

    以下是我的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");
    	}
    }

1 个答案:

答案 0 :(得分:1)

通过在导航方法中指定绝对路径来实现它(添加前导" / "):

this._router.navigate(["/testpage"+page, "PAGE"+page]).then(() => { ... });