Angular 2 - Router example with query parameter

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 - Router example with query parameter</title>
    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="system.config.js"></script>
    <!-- Set the base href, demo only! In your app: <base href="/"> -->
    <script>document.write('<base href="' + document.location + '" />');</script>
  </head>
  <body>
    <app>Loading...</app>
    
    <script>
      System.import('app');
    </script>
  </body>

</html>

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app',
  template: `
    <nav>
      <a [routerLink]="['/component-one']">No param</a>
      <a [routerLink]="['/component-one']" [queryParams]="{ page: 99 }">Go to Page 99</a>
    </nav>
    <div style="color: green;">Outlet:</div>
    <div style="border: 1px solid green;">
      <router-outlet></router-outlet>
    </div>
  `
})
export default class AppComponent {
  
  constructor (private activatedRoute : ActivatedRoute){
    this.activatedRoute.queryParams.subscribe(params => {
      console.log('test'); 
    }
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { bootstrap, platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import AppComponent from './app.component.ts';
import ComponentOne from './component-one';
import { routing, appRoutingProviders } from './app.routes';


@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    AppComponent,
    ComponentOne
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

var angularVersion = '2.0.0';
var rcVersion = '3.0.0';

System.config({
  baseUrl: '/',
  paths: {
    'unpkg:*': 'https://unpkg.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "unpkg:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    '@angular/http': 'unpkg:@angular/http@'+angularVersion,
    '@angular/router': 'unpkg:@angular/router@'+rcVersion,
    'immutable': 'unpkg:immutable@3.8.1',
    'redux': 'unpkg:redux@2.0.0/dist/redux.js',
    'ng2-redux': 'unpkg:ng2-redux@2.3.2',
    'lodash': 'unpkg:lodash@4.0.0',
    'invariant': 'unpkg:invariant@2.2.1',
    'redux-thunk': 'unpkg:redux-thunk@2.1.0',
    'redux-logger': 'unpkg:redux-logger@2.6.0',
    'rxjs': 'unpkg:rxjs@5.0.0-beta.12',
    'zone.js': 'unpkg:zone.js@0.6.25',
    'reflect-metadata': 'unpkg:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

import { Routes, RouterModule } from '@angular/router';
import ComponentOne from './component-one';


export const routes: Routes = [
  { path: '', redirectTo: 'component-one', pathMatch: 'full' },
  { path: 'component-one', component: ComponentOne }
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(routes);

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'component-one',
  template: `
    <div>Query param page #: {{page}}</div>
    <div><button (click)="nextPage()">Next Page</button></div>
    <p>Run example full screen to see query param "page" change</p>`
})
export default class ComponentOne { 
  constructor(
    private route: ActivatedRoute,
    private router: Router) {}

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['page'] || 0;

        console.log('Query param page: ', this.page);
      });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

  nextPage() {
    this.router.navigate(['/component-one'], { queryParams: { page: this.page + 1 } });
  }
}