[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>

<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

巴特西

[Angular 2] ROUTING IN ANGULAR 2 REVISITED

最新文章

热门文章