angular 路由模块 route

转载自  http://www.ngui.cc/news/show-109.html

基础知识

导入路由模块

// ... import { RouterModule } from '@angular/router'; 

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule, RouterModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
}) 

export class AppModule { }

配置路由信息

import { Routes, RouterModule } from '@angular/router'; 

import { UserComponent } from './user.component'; 

export const ROUTES: Routes = [
  { path: 'user', component: UserComponent }
]; 

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ], // ... }) 

export class AppModule {}

routerLink 指令

为了让我们链接到已设置的路由，我们需要使用 routerLink 指令，具体示例如下：

<nav> <a routerLink="/">首页</a> <a routerLink="/user">我的</a> </nav>

当我们点击以上的任意链接时，页面不会被重新加载。反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。

router-outlet 指令

该指令用于告诉 Angular 在哪里加载组件，当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到 router-outlet 元素中。具体示例如下：

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet></router-outlet>
    </div>
  ` }) 

export class AppComponent {}

路由使用示例

配置路由信息

export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'user' },
  { path: 'user', component: UserComponent },
  { path: 'members', component: MembersComponent }
]; 

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(ROUTES)], // ... }) 

export class AppModule { }

配置路由导航

import { Component } from '@angular/core'; @Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h1>欢迎来到Angular的世界</h1>
      <nav>
        <a routerLink="/user">我的</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,
}) 

export class AppComponent { }

完整示例

AppModule

import { NgModule } from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { FormsModule } from '@angular/forms'; 

import { HttpModule } from '@angular/http'; 

import { RouterModule, Routes } from '@angular/router'; 

import { AppComponent } from './app.component'; 

import { UserComponent } from './user.component'; 

import { MembersComponent } from './members.component'; 

import { MemberService } from "./member.service"; 

export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'user' },
  { path: 'user', component: UserComponent },
  { path: 'members', component: MembersComponent }
]; @NgModule({
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(ROUTES)],
  declarations: [AppComponent, UserComponent, MembersComponent],
  providers: [MemberService],
  bootstrap: [AppComponent]
}) 

export class AppModule { }

AppComponent

import { Component } from '@angular/core'; @Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h1>欢迎来到Angular的世界</h1>
      <nav>
        <a routerLink="/user">我的</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,
}) 

export class AppComponent { }

UserComponent

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

interface Address {
    province: string;
    city: string;
} 

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好，我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
    <button (click)="toggleSkills()">
        {{ showSkills ? "隐藏技能" : "显示技能" }}
    </button>
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        <ul>
            <li *ngFor="let skill of skills">
                {{skill}}
            </li>
        </ul>
        <form (submit)="addSkill(skill.value)">
            <label>添加技能</label>
            <input type="text" #skill>
        </form>
    </div>
    ` }) 

export class UserComponent {
    name: string;
    address: Address;
    showSkills: boolean;
    skills: string[]; 

 constructor() { 

 this.name = 'Semlinker'; this.address = {
            province: '福建',
            city: '厦门' }; this.showSkills = true; 

 this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
    }

    toggleSkills() { this.showSkills = !this.showSkills;
    }

    addSkill(skill: string) { 

 let skillStr = skill.trim(); 

 if (this.skills.indexOf(skillStr) === -1) { 

 this.skills.push(skillStr);
        }
    }
}

MembersComponent

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

import { Http } from '@angular/http'; 

import 'rxjs/add/operator/map'; 

import { MemberService } from "./member.service"; 

interface Member {
    id: string;
    login: string;
    avatar_url: string;
} 

@Component({
    selector: 'sl-members',
    template: `
    <h3>Angular Orgs Members</h3>
    <ul *ngIf="members">
      <li *ngFor="let member of members;">
        <p>
          <img [src]="member.avatar_url" width="48" height="48"/>
          ID：<span>{{member.id}}</span>
          Name: <span>{{member.login}}</span>
        </p>
      </li>
    </ul>
    ` }) 

export class MembersComponent implements OnInit {
    members: Member[]; 

 constructor(private memberService: MemberService) { }

    ngOnInit() { 

 this.memberService.getMembers()
            .subscribe(data => { if (data) this.members = data;
            });
    }
}

MemberService

import { Injectable } from '@angular/core'; 

import { Http } from '@angular/http'; 

@Injectable() 

export class MemberService { 

 constructor(private http: Http) { }

 getMembers() { return this.http

            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json())
    }
}