CODEWITHSUNDEEP
angularrouternativescript
Rrcoolp
Rrcoolp

Reputation: 3

Nativescript Angular router 3.0.0-alpha.7 - Navigation failure

Problem showcased on this project example: https://github.com/rrcoolp/test-router-app/

Navigation failure: I have created this test project to present an issue with the NATIVESCRIPT ANGULAR 2 (RC3) Nativescript with router 3.0.0-alpha.7

The issue is simple, navigation to another page fails after first navigation. To see problem in action follow these steps:

  1. Click on any BUTTON (GOTO PAGE 1 or GOTO PAGE 2): after first click the respective page and it's content is rendered

  2. Any subsequent clicks to either of the buttons (including CHILD components) fail in navigation

Any help would appreciated...

Here is a sample of my APP_COMPONENT file:

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

Upvotes: 0

Views: 168

Answers (1)

Alexander Vakrilov
Alexander Vakrilov

Reputation: 1131

Got it working by specifying absolute path in the navigate method(add a leading "/"):

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

Upvotes: 1

Related Questions