利用angular4和nodejs-express構建一個簡單的網站（十）—好友模組

黃先生發表於2019-02-16
AngularNodeJSExpress網站

上一章講解了使用者登入的相關程式碼。使用者登入成功後，就會進入好友模組，在好友模組中會根據不同的使用者ID顯示相應的好友列表，點選好友列表中的單個好友就會進入編輯單個好友頁面，對好友資訊進行編輯。點選列表頁面的新增按鈕，就會新增新的好友。
我們從這一章開始分析這個好友模組。

模組程式碼分析

模組基本程式碼如下：

import { NgModule } from `@angular/core`;
import { CommonModule } from `@angular/common`;
import { ReactiveFormsModule } from `@angular/forms`;
import { HTTP_INTERCEPTORS } from `@angular/common/http`;
import { BirthdaysComponent } from `./birthdays/birthdays.component`;
import { BirthdayListComponent } from `./birthday-list/birthday-list.component`;
import { BirthdayRoutingModule } from `./birthday-routing.module`;
import { BirthdayService } from `./birthday.service`;
import { BirthdayDetailComponent } from `./birthday-detail/birthday-detail.component`;
import { AuthGuardService } from `../auth-guard.service`;
import { AuthInterceptor } from `../auth-interceptor`;
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    BirthdayRoutingModule
  ],
  providers:[
    BirthdayService,
    AuthGuardService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi:true
    }
  ],
  declarations: [BirthdaysComponent, BirthdayListComponent, BirthdayDetailComponent]
})
export class BirthdaysModule { }

在模組程式碼中除了作為子模組必須的匯入的CommonModule模組，還匯入了ReactiveFormsModule,BirthdayRoutingModule兩個模組，ReactiveFormsModule模組用於編輯使用者資訊的提交表單，基本用法和使用者註冊的表單相同，BirthdayRoutingModule模組用於設定路由。
在providers中提供了BirthdayService、AuthGuardService和一個HTTP請求攔截器，分別用於提供資料服務、路由守衛服務和HTTP攔截服務。
在這個模組下共有三個元件：BirthdaysComponent、BirthdayListComponent、BirthdayDetailComponent。
下面開始逐項進行分析。

路由

路由模組BirthdayRoutingModule負責整個Birthdays模組的全部路由。程式碼如下：

import { NgModule } from `@angular/core`;
import { Routes, RouterModule } from `@angular/router`;
import { BirthdaysComponent } from `./birthdays/birthdays.component`;
import { BirthdayListComponent } from `./birthday-list/birthday-list.component`;
import { AuthGuardService } from `../auth-guard.service`;
import { BirthdayDetailComponent } from `./birthday-detail/birthday-detail.component`;
const birthRoutes: Routes = [
    {
        path: `birthday`,
        component: BirthdaysComponent,
        canActivate: [AuthGuardService],
        children: [
            { path: ``, component: BirthdayListComponent },
            {
                path: `:id`,
                component: BirthdayDetailComponent
            },
            {
                path:`new`,
                component:BirthdayDetailComponent
            }
        ]
    },
];
@NgModule({
    imports: [RouterModule.forChild(birthRoutes)],
    exports: [RouterModule]
})
export class BirthdayRoutingModule {}

當地址導航到localhost:4200/birthday時，首先載入BirthdaysComponent控制元件，BirthdaysComponent控制元件只要提供一個路由插座和使用者的登出操作。
BirthdaysComponent程式碼比較簡單：在這裡直接給出html程式碼和類程式碼
html程式碼：

<button type="button" class="btn btn-secondary logout" (click)="logout()">
  Logout</button>
<router-outlet></router-outlet>

控制元件類程式碼：

import { Component, OnInit } from `@angular/core`;
import { Router } from `@angular/router`;
import { JumbotronServive, Jumbotron } from `../../jumbotron.service`;
import { AuthTokenService } from `../../authtoken.service`;
@Component({
  selector: `app-birthdays`,
  templateUrl: `./birthdays.component.html`,
  styleUrls: [`./birthdays.component.css`]
})
export class BirthdaysComponent{
  constructor(
    private jumbServ: JumbotronServive,
    private tokenServ: AuthTokenService,
    private router: Router) {
    jumbServ.setJumbotron(new Jumbotron(`Friends`, ``, ``));
  }
  logout() {
    this.tokenServ.setToken(null);
    this.router.navigate([`/`]);
  }
}

當點選Logout按鈕時，執行logout()函式，清空儲存在本地的認證資訊，並導航到首頁。
…
<繼續路由分析>
birthday路徑下有三個子路由，分別為：”空”，對應BirthdayListComponent元件。”:id”和”new”，對應同一個BirthdayDetailComponent元件，當導航到”new”路徑時，[routerLink]=”[0]”，”:id”的routerLink為具體的id。
這一篇先暫時寫這麼多，下一篇主要介紹三個主要的服務提供程式。敬請期待……

相關文章