擬物化介紹

service : 櫃台
資料： 留言
component：人(A 和 B)

A 請人把留言送回 A，B 把留言 放到櫃檯，C 把留言 放到櫃檯

資料流向

註冊並建立具連動性的值 - 多地點直接替換，一定要先註冊

成果

message.model.ts

export class Message {
    constructor(private text: string,
    private error: boolean = false) { }
}

message.service.ts

import { Injectable } from '@angular/core';
import { Message } from '../model/message';

@Injectable({
    providedIn: 'root'
})
export class MessageService {
    // 基本上就是一個 有參數的函式
    private handler: (m: Message) => void;

    get getHandler() {
        return this.handler;
    }

    reportMessage(msg: Message) {
        if (this.handler != null) {
            // 執行取得的 函式並將參數帶進去
            this.handler(msg);
        }
    }

    registerMessageHandler(handler: (m: Message) => void) {
        // 將函式覆蓋掉當前的 handler
        this.handler = handler;
    }
}

message.component.ts

lastMessage: Message;

constructor(private messageService: MessageService) {
    // 註冊 一個函式 m => this.lastMessage = m
    messageService.registerMessageHandler(m => this.lastMessage = m);
    messageService.reportMessage(new Message('盧那', true));
}

// 傳送 值 替代 註冊Key(this.lastMessage) 的 值
setMessage(text: string) {
  this.messageService.reportMessage(new Message(text, true));
}

message.component.html

<h1>資料都給我</h1>
<p>{{lastMessage | json}}</p>
<button type="button" (click)="setMessage('蘋果')">message 資料變成 蘋果</button>
<button type="button" (click)="setMessage('魔法')">message 資料變成 魔法</button>

以上範例改寫自 pro angular 6