Angular常量文件使用inject()调用服务报错问题求助

你遇到的报错是因为**inject()只能在Angular的注入上下文内调用**——比如组件、服务、指令、管道的类中，或者依赖注入提供器的useFactory函数里。而你的常量文件是在模块加载阶段就执行初始化的，此时并不在注入上下文环境中，直接调用inject()必然抛出错误。

方案一：将列配置改为工厂函数，在组件中注入服务后生成配置 #

把原来的常量改成一个接收服务实例作为参数的工厂函数，在组件（或其他注入上下文环境）中注入服务后，调用这个函数生成列配置。

1. 修改列配置文件 #

import {GngColumn, GngDataType, GngEditorType, GngFormSimpleItem} from "gng-components";
import {DistributionAreaSalesRouteService} from './你的服务路径';

// 改为工厂函数，接收服务实例作为参数
export function createDistributionAreaSalesRouteColumns(service: DistributionAreaSalesRouteService): GngColumn[] {
  return [
    {
      dataField: 'salesRouteCode',
      dataType: GngDataType.String,
      alignment: 'right',
      allowSearch: true
    },
    {
      dataField: 'salesRouteName',
      dataType: GngDataType.String,
      alignment: 'right',
      allowEditing: true,
      allowSearch: true,
      formItem: {
        visibleIndex: 1,
        colSpan: 3,
        editorType: GngEditorType.SelectBox,
        editorOptions: {
          items: service.getList(),
          displayExpr: 'name'
        }
      } as GngFormSimpleItem,
    }
  ];
}

2. 在组件中使用 #

import { Component, inject } from '@angular/core';
import { createDistributionAreaSalesRouteColumns } from './你的列配置文件路径';
import { DistributionAreaSalesRouteService } from './你的服务路径';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 注入服务
  private salesRouteService = inject(DistributionAreaSalesRouteService);
  // 调用工厂函数生成列配置
  columns = createDistributionAreaSalesRouteColumns(this.salesRouteService);
}

方案二：处理异步数据场景（如果getList()是HTTP请求等异步操作） #

如果getList()返回的是Observable（比如从后端接口获取数据），需要处理异步加载的情况：

组件中订阅数据后赋值 #

import { Component, inject, OnInit } from '@angular/core';
import { createDistributionAreaSalesRouteColumns } from './你的列配置文件路径';
import { DistributionAreaSalesRouteService } from './你的服务路径';
import { GngColumn } from 'gng-components';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  private salesRouteService = inject(DistributionAreaSalesRouteService);
  columns: GngColumn[] = [];

  ngOnInit(): void {
    // 订阅服务的异步数据
    this.salesRouteService.getList().subscribe(items => {
      // 先生成基础列配置
      this.columns = createDistributionAreaSalesRouteColumns(this.salesRouteService);
      // 找到目标列，替换items数据
      const targetColumn = this.columns.find(col => col.dataField === 'salesRouteName');
      if (targetColumn?.formItem?.editorOptions) {
        targetColumn.formItem.editorOptions.items = items;
      }
    });
  }
}

（可选）如果组件支持直接绑定Observable #

如果你的表格组件支持将items设为Observable类型，直接在工厂函数中传入service.getList()即可：

export function createDistributionAreaSalesRouteColumns(service: DistributionAreaSalesRouteService): GngColumn[] {
  return [
    // ...其他列
    {
      dataField: 'salesRouteName',
      // ...其他配置
      formItem: {
        // ...其他配置
        editorOptions: {
          items: service.getList(), // 直接传入Observable
          displayExpr: 'name'
        }
      } as GngFormSimpleItem,
    }
  ];
}

内容的提问来源于stack exchange，提问作者Sasan