add routes for query-params and optional-route-parameters

Author: tieppt

README.md

@@ -2,7 +2,28 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.1.
 
+## List available routes:
+
+* `/`
+
+* `/exam`
+
+* `/exam?searchKey=xxx&page=yyy`
+
+* `/exam/detail`
+
+* `/exam/detail;id=xxx;step=yyy`
+
+* `/product`
+
+* `/product/:id`
+
+* `/not-found` - any route does not match above routes.
+
 ## Development server
+
+Run `npm i` or `yarn install` to install dependecies first.
+
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding

src/app/exam/exam-detail/exam-detail.component.html

@@ -1,3 +1,13 @@
 <p>
   exam-detail works!
 </p>
+
+<div>
+  <input type="text" [(ngModel)]="examId">
+  <input type="text" [(ngModel)]="step">
+  <button (click)="doIt()">Do it</button>
+</div>
+<p *ngIf="data">
+  <span>Exam Id: {{ data.examId }}</span>
+  <span>Exam step: {{ data.step }}</span>
+</p>

src/app/exam/exam-detail/exam-detail.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-exam-detail',
@@ -7,9 +8,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExamDetailComponent implements OnInit {
 
-  constructor() { }
+  step: number;
+  examId: number;
+
+  data: any = {};
+
+  constructor(private router: Router, private route: ActivatedRoute) { }
 
   ngOnInit() {
+    this.route.params
+      .map(params => ({
+        id: params['id'] || 1,
+        step: params['step'] || 1
+      }))
+      .subscribe(p => {
+        this.data.examId = p.id;
+        this.data.step = p.step;
+      })
+  }
+  doIt() {
+    let matrixUrlData = {
+      id: this.examId,
+      step: this.step
+    };
+    this.router.navigate(['/exam', 'detail', matrixUrlData]);
   }
 
 }

src/app/exam/exam-list/exam-list.component.html

@@ -1,3 +1,14 @@
 <p>
   exam-list works!
 </p>
+<div>
+  <input type="text" [(ngModel)]="query" (keyup.enter)="doSearch()">
+  <button (click)="doSearch()">Search</button>
+</div>
+<p *ngIf="searchKey">
+  Search key: {{ searchKey }}
+</p>
+
+<p *ngIf="page">
+  Page: {{ page }}
+</p>

src/app/exam/exam-list/exam-list.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs/Rx';
+import { ActivatedRoute, Router, NavigationExtras } from '@angular/router';
 
 @Component({
   selector: 'app-exam-list',
@@ -7,9 +9,42 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExamListComponent implements OnInit {
 
-  constructor() { }
+  searchKey: string = '';
+  page: number = 1;
+  subscription: Subscription;
+
+  query: string = '';
+
+  constructor(private router: Router, private route: ActivatedRoute) { }
 
   ngOnInit() {
+    this.subscription = this.route
+      .queryParams
+      .map(params => ({
+        // return object with all needed key
+        searchKey: params['searchKey'] || '',
+        page: params['page'] || 1
+      }))
+      .subscribe(param => {
+        this.searchKey = param.searchKey;
+        this.page = param.page;
+      });
+  }
+
+  doSearch() {
+    let navigationExtras: NavigationExtras = {
+      queryParams: {
+        searchKey: this.query,
+        page: this.page
+      }
+    };
+    this.router.navigate([], navigationExtras);
+  }
+
+  ngOnDestroy() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
   }
 
 }

src/app/exam/exam.module.ts

@@ -5,10 +5,12 @@ import { ExamRoutingModule } from './exam-routing.module';
 import { ExamComponent } from './exam.component';
 import { ExamDetailComponent } from './exam-detail/exam-detail.component';
 import { ExamListComponent } from './exam-list/exam-list.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     ExamRoutingModule
   ],
   declarations: [ExamComponent, ExamDetailComponent, ExamListComponent]