Implemented isRouteActive property of nsRouterLink

ng-sample/app/app.ts

@@ -25,6 +25,7 @@ import {NavigationTest} from "./examples/navigation/navigation-test";
 import {ActionBarTest} from "./examples/action-bar/action-bar-test";
 import {ModalTest} from "./examples/modal/modal-test";
 import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
+import {RouterOutletTest} from "./examples/navigation/router-outlet-test";
 
 nativeScriptBootstrap(RendererTest);
 //nativeScriptBootstrap(Benchmark);
@@ -38,3 +39,4 @@ nativeScriptBootstrap(RendererTest);
 // nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });
 // nativeScriptBootstrap(ModalTest);
 // nativeScriptBootstrap(PlatfromDirectivesTest);
+// nativeScriptBootstrap(RouterOutletTest, [NS_ROUTER_PROVIDERS]);

ng-sample/app/examples/navigation/router-outlet-test.css

@@ -0,0 +1,26 @@
+.title {
+ font-size: 30;
+ margin: 16;
+ color: darkslategray;
+}
+
+.nav {
+ orientation: horizontal;
+ horizontal-align: stretch;
+ padding: 4;
+ background-color: lightblue;
+}
+
+.link {
+ margin: 10 30;
+ horizontal-align: stretch;
+}
+
+.router-link-active {
+ background-color: lightcoral;
+}
+
+button {
+ horizontal-align: left;
+ margin: 0 6;
+}

ng-sample/app/examples/navigation/router-outlet-test.ts

@@ -0,0 +1,53 @@
+import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, ComponentInstruction, RouteParams} from 'angular2/router';
+import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "../../nativescript-angular/router/ns-router";
+
+@Component({
+ selector: "first",
+ directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
+ styleUrls: ["examples/navigation/router-outlet-test.css"],
+ template: `
+ <StackLayout>
+ <Label text="First component" class="title"></Label>
+ </StackLayout>`
+})
+class FirstComponent { }
+
+@Component({
+ selector: "second",
+ directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
+ styleUrls: ["examples/navigation/router-outlet-test.css"],
+ template: `
+ <StackLayout>
+ <Label [text]="'Second component - ' + id" class="title"></Label>
+ </StackLayout>`
+})
+class SecondComponent {
+ public id: string;
+ constructor(routeParams: RouteParams) {
+ this.id = routeParams.get("id");
+ }
+}
+
+@Component({
+ selector: 'navigation-test',
+ directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
+ styleUrls: ["examples/navigation/router-outlet-test.css"],
+ template: `
+ <StackLayout>
+ <StackLayout class="nav">
+ <Button text="First" [nsRouterLink]="['First']"></Button>
+ <Button text="GO(1)" [nsRouterLink]="['Second', { id: 1 }]"></Button>
+ <Button text="GO(2)" [nsRouterLink]="['Second', { id: 2 }]"></Button>
+ <Button text="GO(3)" [nsRouterLink]="['Second', { id: 3 }]"></Button>
+ </StackLayout>
+
+ <router-outlet></router-outlet>
+ </StackLayout>
+ `
+})
+@RouteConfig([
+ { path: '/first', component: FirstComponent, name: 'First', useAsDefault: true },
+ { path: '/second/:id', component: SecondComponent, name: 'Second' },
+])
+export class RouterOutletTest { }

src/nativescript-angular/router/ns-router-link.ts

@@ -35,7 +35,8 @@ import { log } from "./common";
  selector: '[nsRouterLink]',
  inputs: ['params: nsRouterLink'],
  host: {
- '(tap)': 'onTap()'
+ '(tap)': 'onTap()',
+ '[class.router-link-active]': 'isRouteActive'
  }
 })
 export class NSRouterLink {
@@ -46,7 +47,7 @@ export class NSRouterLink {
 
  constructor(private _router: Router, private _location: Location) { }
 
- // get isRouteActive(): boolean { return this._router.isRouteActive(this._navigationInstruction); }
+ get isRouteActive(): boolean { return this._router.isRouteActive(this._navigationInstruction); }
 
  set params(changes: any[]) {
  this._routeParams = changes;