iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
0

簡述

說明會有哪些常見的服務是所有組件都會用的。

功能

開發過程中有幾種服務是必然用到的。

  • logger.service.ts
  • web.service.ts
  • data.service.ts
  • user.service.ts
  • login.service.ts

檔案結構

-src
  |-app
    |-app.component.css
    |-app.component.html
    |-app.component.ts
    |-app.module.ts
    |-service
        |-logger.service.ts
        |-web.service.ts
        |-data.service.ts
        |-user.service.ts
        |-login.service.ts

實作

(一) UserService

實務上很多地方都會需要,目前登入者身份的相關訊息,
例如說改了某筆資料要記錄是誰改的,
所以會寫一隻服務專門輸出目前登入者訊息。

user.service.ts

import { Injectable } from "@angular/core";
import { IUser } from "../model/data";

@Injectable({
  providedIn: "root"
})
export class UserService {
  private user = <IUser>{};

  constructor() {}

  setOne(user: IUser) {
    this.user = Object.assign(this.user, user);
  }

  setToken(token: string) {
    this.user = Object.assign(this.user, {
      Token: token
    });
  }

  getUser() {
    return this.user;
  }

  delUser() {
    this.user = null;
  }
}


(二) LoginService

此服務會寫目前登入登出的即時狀態。
讓其他服務或是組件可訂閱,並即時知道登入登出的狀態。

login.service.ts

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/internal/Subject";

@Injectable({
  providedIn: "root"
})
export class LoginService {
  private loginSubject = new Subject<boolean>();
  loginState = this.loginSubject.asObservable();

  constructor() {}

  login() {
    this.loginSubject.next(true);
  }

  logout() {
    this.loginSubject.next(false);
  }
}

訂閱者模式簡述:

其實observable類似單向溝通的管道,
通常管道會有一端負責送值,另一端負責接值,
不可能在同個管道同一端同時有接值跟送值。
(因為無意義)

在service中通常會定義管道內資料的格式,如Subject<boolean>

AComponent假設是扮演送值、
BComponent假設是扮演接值。

那麼A可能在判斷某些條件為真時,
去觸發service裡的Observable的next()
則Observable就會推資料給接收者。

B只要訂閱這個管道Observable
是跟A推送的管道為同一個,那麼B就會收到值。

this.service.loginState.subscribe(val => {
    console.log('值',val)
});

範例碼

https://stackblitz.com/edit/ngcms-service


上一篇
day08 共用service(二)
下一篇
day10 AppComponent(一)
系列文
用Angular打造完整後台30

尚未有邦友留言

立即登入留言