Fix the navigation using RouterExtensions

Author: jdnichollsc

src/app/about/components/about/about.component.tns.html

@@ -1,10 +1,9 @@
 <Page>
-    <ActionBarExtension>
-        <NavigationButton visibility="collapsed"></NavigationButton>
-        <ActionItem ios.position="left">
-            <Button class="ion-icon" text="{{ '\uF30C' }}" [nsRouterLink]="['/home']" clearHistory="true"></Button>
+    <ActionBar title="About">
+        <ActionItem ios.position="left" (tap)="backPage()">
+            <Button class="ion-icon" text="{{ '\uF30C' }}"></Button>
         </ActionItem>
-    </ActionBarExtension>
+    </ActionBar>
     <StackLayout>
         <Label class="h1 title" text="About me!"></Label>
     </StackLayout>

src/app/about/components/about/about.component.tns.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    moduleId: module.id,
+    selector: 'about-page',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+
+    constructor(private _router: RouterExtensions) { }
+
+    ngOnInit() {
+    }
+
+    backPage() {
+        this._router.back()
+    }
+}

src/app/about/components/about/about.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
     moduleId: module.id,
@@ -8,9 +9,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AboutComponent implements OnInit {
 
-    constructor() { }
+    constructor(private _router: Router) { }
 
     ngOnInit() {
     }
 
+    openPage(url) {
+        this._router.navigate([url])
+    }
 }

src/app/app.component.tns.html

@@ -1,5 +1,3 @@
-<ActionBar title="NativeScript Mobile App, yay!">
-</ActionBar>
 <StackLayout class="container" row="1">
     <router-outlet></router-outlet>
 </StackLayout>

src/app/home/components/home/home.component.tns.html

@@ -1,16 +1,17 @@
 <Page xmlns:Card="nativescript-cardview">
-    <ActionBarExtension>
-        <ActionItem ios.position="right">
-            <Button class="ion-icon" [nsRouterLink]="['/about']" text="{{ '\uf41a' }}"></Button>
+    <ActionBar title="NativeScript Mobile App, yay!">
+        <ActionItem ios.position="right" (tap)="openPage('/about')">
+            <Button class="ion-icon" text="{{ '\uf41a' }}"></Button>
         </ActionItem>
-    </ActionBarExtension>
+    </ActionBar>
     <scroll-view>
         <GridLayout rows="auto, *">
-            <SearchBar row="0" hint="Search hint" [text]="Search"></SearchBar>
-            <StackLayout row="1">
+            <SearchBar row="0" hint="Search hint"></SearchBar>
+            <StackLayout row="3">
+                <Button text="Issue navigating to About page using nsRouterLink" [nsRouterLink]="['/about']"></Button>
                 <Card:CardView class="cardStyle" radius="10" elevation="50" margin="20">
                     <grid-layout rows="*, *, *" columns="*, *, *">
-                        <Image (click)="openPage()" src="http://ionicframework.com/img/home/cta-iphone-2.png" margin="20" stretch="aspectFill" colSpan="3" row="0"></Image>
+                        <Image src="http://ionicframework.com/img/home/cta-iphone-2.png" margin="20" stretch="aspectFill" colSpan="3" row="0"></Image>
                         <TextView class="description" editable="false" text="The most popular template to create web (Ionic) and native (NativeScript) mobile apps!" textWrap="true" row="1" colSpan="3"></TextView>          
                         <Button text="Favorite" tap="goAway" row="3" col="0"></Button>
                         <Button text="Listen" row="3" col="1"></Button>

src/app/home/components/home/home.component.ts

@@ -15,7 +15,7 @@ export class HomeComponent implements OnInit {
 
     }
 
-    openPage(url) {
+    showAlert() {
         let options = {
             title: "Race selection",
             message: "Race chosen: Unicorn",
@@ -24,4 +24,7 @@ export class HomeComponent implements OnInit {
         alert(options);
     }
 
+    openPage(url) {
+        this._router.navigate([url])
+    }
 }