[Angular 2] ROUTING IN ANGULAR 2 REVISITED

Let's say we have a list of contacts, click each contact, we can render a new route to get the detail.

 

Define the routers:

//contact-list.router.ts

import {ContactListComponent} from "./contact-list-component.component";
import {ContactDetailComponent} from "./contact-detail-component/contact-detail-component.component";
export const ContactsAppRoutes = [
  { path: '', component: ContactListComponent },
  { path: 'contacts/:id', component: ContactDetailComponent }
];

path: '', --> here empty path means use this component by default.

 

Bootstrap the router

To use router, we need to provider the router service. 

bootstrap(AppComponent, [
  provideRouter(ROUTER-OBJECT)
]); 

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import {ContactsAppRoutes} from './app/contact-list-component/contact-list.routes';
import {provideRouter} from "@angular/router";

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [
  provideRouter(ContactsAppRoutes)
]);

 

Create outlet for rendering the router:

//app.component.html

<h1>
  {{title}} Hello Router 3.0
</h1>
<router-outlet></router-outlet>

So the router will be render inside this router-outlet.

 

The contact list component:

import { Component, OnInit } from '@angular/core';
import {ContactDetailComponent} from "./contact-detail-component/contact-detail-component.component";
import {ROUTER_DIRECTIVES} from "@angular/router";

@Component({
  moduleId: module.id,
  directives: [ContactDetailComponent, ROUTER_DIRECTIVES],
  selector: 'app-contact-list-component',
  templateUrl: 'contact-list-component.component.html',
  styleUrls: ['contact-list-component.component.css']
})
export class ContactListComponent implements OnInit {

  contacts: Array<Object>;
  constructor() {
    this.contacts = [
      {
        id: 0,
        name: "Zhentian",
        position: "Lead developer"
      },
      {
        id: 1,
        name: "ABC",
        position: "Junior developer"
      },
      {
        id: 2,
        name: "Herry",
        position: "Productor Owner"
      },
      {
        id: 3,
        name: "Janne",
        position: "Master"
      },
      {
        id: 4,
        name: "Jonne",
        position: "Backend developer"
      }
    ];
  }
  ngOnInit() {
  }

}

Notice that, we have inject the ROUTER_DIRECTIVE for later use.

 

Template for the contact list component:

<h2>Contacts</h2>
<ul>
  <li *ngFor="let contact of contacts">
    <a [routerLink]="['/contacts', contact.id]">{{contact.name}}</a> |
    <a routerLink="/contacts/{{contact.id}}">{{contact.name}}</a>
  </li>
</ul>

To navigate to other router compoent, we need to use 'routerLink', notice there is tow ways to use 'routerLink':

<a [routerLink]="['/contacts', contact.id]">{{contact.name}}</a> 

or

<a routerLink="/contacts/{{contact.id}}">{{contact.name}}</a>

---

For the contact detail compoent, we want to receive an 'id', which can later fetch the data from server.

To get the param which be passed in , we need to use 'ActivedRoute':

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

@Component({
  moduleId: module.id,
  selector: 'app-contact-detail-component',
  templateUrl: 'contact-detail-component.component.html',
  styleUrls: ['contact-detail-component.component.css']
})
export class ContactDetailComponent implements OnInit {

  id: number;
  constructor(private route: ActivatedRoute) {
    this.id = this.route.snapshot.params['id'];
  }

  ngOnInit() {
  }

}

Here we use 'snapshot', this means we don't care about the later router params changes, we just need to get id and that's it. It is a cheaper solution.

 

Another way to do it is using Observable, ActivatedRoute comes with a params property which is an Observable. To access the contact id, all we have to do is to subscribe to the parameters Observablechanges. 

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

@Component({
  moduleId: module.id,
  selector: 'app-contact-detail-component',
  templateUrl: 'contact-detail-component.component.html',
  styleUrls: ['contact-detail-component.component.css']
})
export class ContactDetailComponent implements OnInit {

  id: number;
  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params
      .map(params => params['id'])
      .subscribe((id) => {
        this.id = id;
      });
  }

}

But in this case, use snapshot is prefect fine, since id would change later.

 

Original Actical: http://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html

 

Github: https://github.com/zhentian-wan/hello-angular2