摘要：為了做到這一點，我創建了一個服務提供商，通過的消息推送來實現。最后聲明一個來發送修改過的對象。根組件，創建它并插入宿主頁面。路由的作用是在找不到任何路由時，訪問組件。定義路由數組后，用裝飾器導入，并將路由數組傳遞給的數組。

上一篇文章對用戶發來的注冊和登錄信息進行了處理，并實現了將注冊用戶信息插入到mysql數據庫的數據表和從mysql數據庫的數據表中查詢到用戶的登錄信息并返回用戶認證信息，從這篇起，開始構建前端的登錄和注冊頁面，并實現angular路由。
為了讓大家能夠方便理解，我簡單的畫了一張我這個程序的路由分析圖：

初始頁面app.component.html的代碼如下：

  

    

      
{{title}}
      
{{lead}}
      

      
{{content}}
      
    
  
  

它是由一個bootstrap的jumbotron組件和一個router-outlet組成，在jumbotron中的標題、lead和內容應該隨著導航到不同的頁面而改變，所以我將這3個標簽的內容分別用插值表達式title、lead、content代替。為了做到這一點，我創建了一個JumbotronServive服務提供商，通過rxjs的消息推送來實現。JumbotronServive的代碼如下：

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";
export class Jumbotron{
    constructor(
        public title:string,
        public lead:string,
        public content:string
    ){}
}
@Injectable()
export class JumbotronServive{
    private jumbSource = new Subject();
    jumb$ = this.jumbSource.asObservable();
    setJumbotron(jumb: Jumbotron){
        this.jumbSource.next(jumb);
    }  
}

首先創建了一個Jumbotron類，包含3個屬性title、lead、content分別對應jumbotron中的標題、lead和內容，然后寫一個服務提供商類，在這個類中聲明了一個rxjs的Subject對象(Subject是允許值被多播到多個觀察者的一種特殊的Observable),然后調用Subject的asObservable()聲明一個Observable對象jumb$來訂閱Subject發送的消息。最后聲明一個setJumbotron來發送修改過的Jumbotron對象。在AppComponent類中，我們就可以訂閱并更改jumbotron中的標題、lead和內容。代碼如下：

jumServ.jumb$.subscribe(
      jumb=>{
        this.title = jumb.title;
        this.lead = jumb.lead;
        this.content = jumb.content;
      });

router-outlet：路由出口，用于標記該在哪里顯示視圖，也就是說導航到的所有路由視圖都會在標簽中顯示。
angular-cli(以下簡稱ng)已經為我們寫好了基本的AppModule（Angular程序的根模塊，Angular通過引導根模塊來啟動該應用）,在這里列出看一下：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    JumbotronServive,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule裝飾器將AppModule標記為 Angular 模塊類（也叫NgModule類）。 @NgModule接受一個元數據對象，告訴 Angular 如何編譯和啟動應用。
@NgModule有以下屬性：

imports — 本模塊聲明的組件模板需要的類所在的其它模塊，其中最重要的是BrowserModule，這個在每個在瀏覽器中運行應用都需要它。

declarations —聲明本模塊中擁有的視圖類，在AppModule中定義了應用的唯一組件AppComponent。

bootstrap — 根組件，Angular 創建它并插入index.html宿主頁面。

providers - 服務的創建者，并加入到全局服務列表中，可用于應用任何部分，在這里加入了JumbotronServive，用于提供bootstrap的jumbotron組件中title、lead、content的更新。

AppRoutingModule是應用的路由模塊，具體代碼：

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { PageNotFoundComponent } from "./page-not-found.component";
const appRoutes: Routes = [
    {
        path:"",
        redirectTo:"/users",
        pathMatch:"full"
    },
    {path: "**", component: PageNotFoundComponent}
];
@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule{}

首先定義個路由數組，其中的路由對象包括路由路徑（path）、和路由對應的組件（component），因為我們的網站一打開就進入用戶管理界面，在導航到首頁時需要直接跳轉到users路由，首頁路由（""）沒有對應組件，而是直接跳轉到users路由。path:"**"路由的作用是在找不到任何路由時，訪問PageNotFoundComponent組件。
定義路由數組后，用@NgModule裝飾器導入RouterModule，并將路由數組傳遞給RouterModule的forRoot數組。
最后導出RouterModule模塊。