test: Add nav buttons to details pages

Author: vakrilov

e2e/router-tab-view/app/player/player-detail.component.html

@@ -2,4 +2,7 @@
 <StackLayout flexDirection="column" class="page" class="m-15">
     <Label class="h2" [text]="item.id"></Label>
     <Label class="h2" [text]="item.name"></Label>
+
+    <Button text="next" [nsRouterLink]="['../', item.id + 1]"></Button>
+    <Button text="players" [nsRouterLink]="['../../players']"></Button>
 </StackLayout>

e2e/router-tab-view/app/player/player-detail.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
 import { DataService, DataItem } from "../data.service";
+import { Subscription } from "rxjs/Subscription";
 
 @Component({
     selector: "ns-player-details",
@@ -10,14 +11,21 @@ import { DataService, DataItem } from "../data.service";
 })
 export class PlayerDetailComponent implements OnInit {
     item: DataItem;
+    subscription: Subscription;
 
     constructor(
         private data: DataService,
         private route: ActivatedRoute
     ) { }
 
     ngOnInit(): void {
-        const id = +this.route.snapshot.params["id"];
-        this.item = this.data.getPlayer(id);
+        this.subscription = this.route.params.subscribe(params => {
+            const id = +params["id"];
+            this.item = this.data.getPlayer(id);
+        })
+    }
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
 }

e2e/router-tab-view/app/team/team-detail.component.html

@@ -2,4 +2,7 @@
 <StackLayout flexDirection="column" class="page" class="m-15">
     <Label class="h2" [text]="item.id"></Label>
     <Label class="h2" [text]="item.name"></Label>
+
+    <Button text="next" [nsRouterLink]="['../', item.id + 1]"></Button>
+    <Button text="teams" [nsRouterLink]="['../../teams']"></Button>
 </StackLayout>

e2e/router-tab-view/app/team/team-detail.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
 import { DataService, DataItem } from "../data.service";
+import { Subscription } from "rxjs/Subscription";
 
 @Component({
     selector: "ns-team-details",
@@ -10,14 +11,21 @@ import { DataService, DataItem } from "../data.service";
 })
 export class TeamDetailComponent implements OnInit {
     item: DataItem;
+    subscription: Subscription;    
 
     constructor(
         private data: DataService,
         private route: ActivatedRoute
     ) { }
 
     ngOnInit(): void {
-        const id = +this.route.snapshot.params["id"];
-        this.item = this.data.getTeam(id);
+        this.subscription = this.route.params.subscribe(params => {
+            const id = +params["id"];
+            this.item = this.data.getTeam(id);
+        })
+    }
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
 }