Merge pull request #153 from NativeScript/feature/is-route-active

Implemented isRouteActive property of nsRouterLink

Author: vakrilov

Diff for: 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]);

Diff for: 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;
+}

Diff for: 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 { }

Diff for: 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;