[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

Observable

changes.

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