从另一个组件访问组件的提供者

问题描述

我有一个带有提供程序的组件的库，就像这样-

@Component({
  selector: "lib-layer-list-widget",templateUrl: "./layer-list-widget.component.html",styleUrls: ["./layer-list-widget.component.css"],providers: [LayerListWidgetService],})
export class LayerListWidgetComponent {}

这个组件正在我的 angular 项目中呈现并且
该服务具有我想从项目中的组件中使用的方法。

示例：

import {
  LayerListWidgetService,} from "my-lib";

@Component({
  selector: "app-example",templateUrl: "./app-example.component.html",styleUrls: [],})
export class AppExampleComponent {
    constructor( private layerListWidgetService: LayerListWidgetService) {
         let elements = this.layerListWidgetService.getLayerListElements();
    }
}

问题是 - 这不能正常工作，因为我在这里引用的实例与作为组件提供者创建的实例不同。
我试图阅读文档并四处搜索，但找不到具体的答案。

有没有办法从另一个组件访问一个组件的提供者（在一个库中）？

解决方法

移除组件级别的 provider，并将其添加到 NgModule 级别的 providers 数组中。

即

    @NgModule({
       providers: [LayerListWidgetService]
    })

组件有自己的注入器，它与同一树中的其他组件形成层次结构。但是如果你将提供者添加到 NgModule，它会被注册到最近的 NgModule 注入器（它要么是延迟加载的模块，要么是根注入器）。使用相同注入器（或分层注入器）的服务可以在也使用相同注入器的组件之间共享。