将解析器数据传递给子组件：Angular答案

【问题标题】：Pass resolver data to child components : Angular将解析器数据传递给子组件：Angular
【发布时间】：2020-10-03 09:13:16
【问题描述】：

我有一个带有路由的父组件。在该组件内部，我有 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;
  }

【问题讨论】：

考虑让公共服务在子组件之间共享数据。您可以通过在解析器服务中注入公共服务来将值设置为解析器中的公共服务。
@saravana kumar 可以分享一个例子
请参考这个例子stackblitz.com/edit/…

标签： angular

【解决方案1】：

具有使用 set 和 get 方法保存数据的公共服务。在您的仪表板（父）组件和其他子组件中注入公共服务。

使用 setData 方法可以设置仪表板（父）组件的数据

使用 getData 方法可以从任何子组件中获取数据

请参考这个例子

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

【讨论】：