将解析器数据传递给子组件：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