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

Posted 2023-03-13

【中文标题】如何在Angular中的组件中调用服务类中的函数

【英文标题】：How to call a function inside service class in a component in Angular

【发布时间】：2020-12-12 16:54:32

【问题描述】：

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

这是我的 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);
        );
      

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

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

这是我的DropdownComponent.ts 文件

constructor(private dropdownServiceHandler: DropdownService)  

ngOnInit() 
    this.dropdownServiceHandler.getData();
  

但它显示这样的错误 TypeError：无法读取未定义的属性“getData()” 在 DropdownComponent.ngOnInit (dropdown.component.ts:17)

【参考方案1】：

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

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

【讨论】：

@Jeffery 然后显示为data-loader-handler.service.ts:6 Uncaught ReferenceError: Cannot access 'DropdownService' before initialization