將解析器數據傳遞給子組件：Angular

Question

我有一個帶有路由的父組件。 在該組件內部，我有 3 個子組件，但它們沒有任何路由。 我正在使用他們的選擇器來渲染它們。 現在我已經為父組件創建了一個解析器服務，並為兩個父子組件調用了所有 api，並且我正在使用 @Input 將數據傳遞給子組件。

有沒有更好的方法將解析器數據傳遞給子組件，因為我將在不同的父組件中使用這些子組件，所以在這種情況下它將變得復雜和重復。

父組件 -

<div class="dashboard-outer">
    <app-dashboard-leftbar [leftpanelData]="resolverData"></app-dashboard-leftbar>

    <app-dashboard-topbar [toppanelData]="resolverData"></app-dashboard-topbar>

    <div class="dashboard-content-outer">
        <div class="dashboard-content-area">

        </div>
    </div>
    <app-dashboard-rightbar [rightPanelData]="resolverData"></app-dashboard-rightbar>
</div>

解析服務 -

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {

    const leftpanel = this._ajaxService.apiCall({}, 'dashboard/leftpanel', 'POST');
    const toppanel = this._ajaxService.apiCall({}, 'dashboard/toppanel', 'POST');
    const rightpanel = this._ajaxService.apiCall({}, 'dashboard/rightpanel', 'POST');


    const dataForDashboard = forkJoin(leftpanel, toppanel, rightpanel)
    return dataForDashboard;
  }

Answer 1

具有使用 set 和 get 方法保存數據的通用服務。 在您的儀表板（父）組件和其他子組件中注入公共服務。

使用 setData 方法，您可以從儀表板（父）組件設置數據

使用 getData 方法，您可以從任何子組件中獲取數據

請參考這個例子

https://stackblitz.com/edit/angular-resolver-simple-example01?file=src%2Fapp%2Fcomponents%2Fhello%2Fhello.component.html