时间戳

首页 > 解决方案 > 如何在Angular中的组件中调用服务类中的函数

angular - 如何在Angular中的组件中调用服务类中的函数

问题描述

我DropdownService在服务文件夹和DropdownComponent共享文件夹中有服务类。我想getData()在我的服务类中调用方法 DropdownComponent

这是我的 DropdownService 类。

  @Injectable({
  providedIn: 'root'
})
export class DropdownService {

    constructor(private serviceHandler: ServiceHandler) { }
     getData() {
    
        FilterCriterias.isDisableFilters  = true;
        this.serviceHandler.getPrices([], []).subscribe(prices => {
          console.log(prices[0].code);
          const priceList = [];
          for (let i = 0; i < prices.length; i++) {
            const price = prices[i];
            if (i !== 0) {
              priceList.push({ code: price.code, name: price.name, isSelected: false, isDefault: false });
            } else {
              priceList.push({ code: price.code, name: price.name, isSelected: true, isDefault: true });       
            }
          }
          FilterCriterias.priceList = priceList;
          console.log(FilterCriterias.priceList);
        });
      }
}

这是我的下拉模块文件。我已经添加DropdownService到 DropdowntModule 文件中。

@NgModule({
  declarations: [DropdownComponent],
  imports: [
    CommonModule
  ],
  providers: [DropdownService],
  exports: [
    DropdownComponent
  ]
})
export class DropdowntModule { }

这是我的DropdownComponent.ts文件

constructor(private dropdownServiceHandler: DropdownService) { }

ngOnInit() {
    this.dropdownServiceHandler.getData();
  }

但它显示这样的错误 TypeError: Cannot read property 'getData()' of undefined at DropdownComponent.ngOnInit (dropdown.component.ts:17)

标签： angularcomponentsangular-servicesngoninit

解决方案

尝试将providedIn: 'root'您的 DropdownService 更改为providedIn: DropdownModule

来源：https ://angular.io/guide/providers#providedin-and-ngmodules

推荐阅读