Angular通用列表组件调用服务Observable报错求助

问题根源 #

你用new Function()报错的核心原因是：该方法创建的函数默认在全局作用域执行，无法访问组件实例的this上下文，自然拿不到注入的Service实例，所以会出现"Cannot read properties of undefined"错误。而且new Function()本质和eval()一样存在安全风险，完全不推荐在这种场景使用。

推荐方案：用服务映射表实现安全的动态调用 #

最稳妥的方式是提前创建一个mode与对应Service、方法名的映射表，通过mode直接匹配到目标服务和方法，既安全又能保证类型可控。

代码示例（以Angular为例）

1. 组件中注入所有需要的Service并定义映射关系：

import { Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { IngredientService } from './ingredient.service';
import { ProductService } from './product.service';
import { MedalService } from './medal.service';

@Component({
  selector: 'app-generic-list',
  templateUrl: './generic-list.component.html',
  styleUrls: ['./generic-list.component.css']
})
export class GenericListComponent {
  @Input() mode: 'ingredients' | 'products' | 'medals';

  constructor(
    private ingredientService: IngredientService,
    private productService: ProductService,
    private medalService: MedalService
  ) {}

  // 预定义mode与服务、方法的映射
  private serviceMapping = {
    ingredients: {
      service: this.ingredientService,
      targetMethod: 'collectionLengthById'
    },
    products: {
      service: this.productService,
      targetMethod: 'collectionLengthById'
    },
    medals: {
      service: this.medalService,
      targetMethod: 'collectionLengthById'
    }
  };

  // 动态调用目标方法的公共函数
  getCollectionLength(id: number): Observable<number> {
    const mapping = this.serviceMapping[this.mode];
    if (!mapping) {
      throw new Error(`不支持的mode类型：${this.mode}`);
    }
    return mapping.service[mapping.targetMethod](id);
  }
}

2. 对应Service的示例（以IngredientService为例）：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IngredientService {
  collectionLengthById(id: number): Observable<number> {
    // 替换为实际业务逻辑，比如请求后端接口
    return of(5);
  }
}

方案优势 #

• 安全可靠：完全避免动态执行代码的风险，所有调用逻辑都是预定义的
• 类型可控：通过TypeScript联合类型约束mode的取值，避免传入无效值
• 易维护：后续新增模型时，只需在映射表中添加对应配置即可

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