簡述

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

功能

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

• 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假設是扮演接值。

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

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

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

範例碼

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