注意事項

各 component 資料 null 時的畫面處理

app.component.ts

1. 設定本地端的資料、儲存資料到資料Service
2. 在 Call API 傳送到各 component
   • Subject：用於 活躍性 / 易變性 的資料
   • service 靜態 data：用於 順序性 /一次性 / 穩固性 的資料
   • Resolve：用於 資料 純粹是 resolve 提供，若無資料就不進頁面使用
     note:當資料載入失敗，無法進入頁面( 牽連到正常顯示資料在畫面也無法呈現 )
     note:提供的 Observable 需要是一次性資料，不能是維持訂閱狀態，會卡著不顯示
     note:可當純粹進入 component 前的資料處理器

結果

範例 用的靜態資料 - 對於 childComponent 資料取不到是因為 OnInit 事件已經結束了

流程圖

上述是資料取得 概略流程圖，還是要依照 實際資料 顯示位置做調整

data.repository.service.ts

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class DataRepositoryService {

    private _status: string;

    get status(): string {
        return this._status;
    }

    setStatus(status: string): void {
        this._status = status;
    }

    clearStatus(): void {
        this._status = null;
    }
}

app.component.ts

key = 'userInfo';

constructor(
    private dataService: DataRepositoryService) {
}

ngOnInit(): void {
    const text = this.getSession() ? decodeURI(this.getSession()) : null;
    // 有本地端資料才 覆蓋設定
    if (text) {
        this.dataService.setStatus(text);
    }
}

setLocalStorage(text): void {
    this.dataService.setStatus(text);
    const str = JSON.stringify(text);
    const encodeStr = encodeURI(str);
    this.setLocal(encodeStr);
}

setSessionStorage(text): void {
    this.dataService.setStatus(text);
    const str = JSON.stringify(text);
    const encodeStr = encodeURI(str);
    this.setSession(encodeStr);
}

private getLocal(): string {
    return localStorage[this.key];
}

private setLocal(data: string): void {
    localStorage[this.key] = data;
}

private getSession(): string {
    return sessionStorage[this.key];
}

private setSession(data: string): void {
    sessionStorage[this.key] = data;
}

app.component.html

<h1>本地端儲存</h1>
{{localLetter}}
{{sessionLetter}}
<button type="button" (click)="setSessionStorage('虛擬')">session 資料變成 虛擬</button>
<button type="button" (click)="setLocalStorage('現實')">local 資料變成 現實</button>
<button type="button" (click)="getSessionStorage()">session 資料取得</button>
<button type="button" (click)="getLocalStorage()">local 資料取得</button>
<button type="button" (click)="clearStorage()">local 資料清除</button>

router loadChildren 後的 child.component

child.component.ts

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

child.component.html

<h1>本地端資料</h1>
<span>{{status}}</span>