擬物化介紹

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

A 把留言 放到櫃檯，B 到櫃檯 看留言

資料流向

先執行到的 Acomponent 儲存資料到 service ，後執行到的 Bcomponent 從 service 取得資料

這種資料傳遞方式，很難做到不照時間順序執行，因為 Acomponent 沒有 初始化的時間事件可以再去 執行儲存或取得資料

成果

data.service.ts

private _food: string;

get food() {
    return this._food;
}

setFood(food: string) {
    this._food = food;
}

clearFood() {
    this._food = null;
}

app.component.ts

constructor(private dataService: DataRepositoryService) {
}

ngOnInit(): void {
    this.dataService.setFood('巧克力');
}

order.component.html

<p>I have {{food}}</p>
<button type="button" (click)="setFood('香蕉')">Service 資料變成 香蕉</button>
<button type="button" (click)="clearFood()">Service 資料清空</button>
<button type="button" (click)="getFood()">資料正式變成 香蕉</button>

order.component.ts

food: string;

constructor(private dataService: DataService) {
}

ngOnInit(): void {
    this.food = this.dataService.food;
}

setFood(name: string): void {
    this.dataService.setFood(name);
}

clearFood(): void {
    this.dataService.clearFood();
}

getFood(): void {
    this.food = this.dataService.food;
}