时间戳

首页 > 解决方案 > 通过 ng-content 从子组件访问组件提供者

angular - 通过 ng-content 从子组件访问组件提供者

问题描述

我正在使用库ngx-mapbox-gl。该库提供了一个组件“mgl-map”，它允许您添加子层组件，然后在地图上呈现。

我的目标是拥有一个包含地图组件的父组件，并让图层使用 ng-content 注入。

Inside custom map component map.component.ts:
    <mgl-map ...>
      <!-- layers will be injected here -->
      <ng-content></ng-content>
    </mgl-map>


Intended use of app-map component:
    <app-map>
      <some-layer ...></some-layer>
    </app-map>

这会引发以下错误：

ERROR Error: StaticInjectorError(AppModule)[LayerComponent -> MapService]:

我认为问题源于在提供 MapService的库的地图组件中使用组件提供程序。

其他用户已经注意到了这个问题，但是项目维护者还没有提供一个可以在哪里工作的例子：https ://github.com/Wykks/ngx-mapbox-gl/issues/51 。建议的解决方法是使用动态内容注入。

我试图解决这个问题

正如维护者建议的那样，我尝试在父组件中使用 ng-template 和带有 ngTemplateOutlet 的 ng-container 用于动态内容注入，但这不起作用，产生相同的错误。例子：

app.component.html:
    <app-map [layers]="layers">
      <ng-template #layers>...</ng-template>
    </app-map>

map.component.ts:
    @Input() layers: TemplateRef<any>;

map.component.html:
    <mgl-map ...>
      <ng-container *ngTemplateOutlet="layers"></ng-container>
    </mgl-map>

子组件仍然可以通过注入主机来访问父 mgl-map 组件，所以我不确定为什么不能也引用提供程序。

如何强制子组件从正确的父组件使用 MapService，或者这是不可能的？

谢谢

标签： angular

解决方案

他们是您可以提供服务的两个地方-

  1. 在应用模块中
  2. 在地图组件提供者数组中

在地图组件中提供服务，例如 -

import mapService from 'mypath';

@Component({
   ....,
   providers:[mapService]

})

推荐阅读