组件中使用Interface出现参数无法解析报错的解决方法

抛出Can't resolve all parameters for ContentRowComponent: ([object Object], [object Object], [object Object], [object Object], [object Object], ?).错误的核心原因是：TypeScript 接口仅在编译阶段存在，编译为JS后会被完全擦除，运行时没有任何对应实体，Angular依赖注入系统无法识别接口类型的构造函数参数，最后一个参数位置显示?就是DI容器找不到对应注入项的表现。

接口的核心作用是编译时做类型约束，本身不是可被注入的服务类，不能直接放在Angular组件/服务的构造函数注入参数列表里。

根据你的业务场景选对应方案即可，绝大多数场景选方案1就满足需求。

方案1：作为普通业务属性使用（推荐） #

不要把CustomizePayload写在构造函数的注入参数中，直接在类中声明属性，在合适的时机赋值即可：

1. 调整组件构造函数，移除注入列表里的customizePayload参数，其他正常的服务注入保留
2. 在类中声明customizePayload属性，用CustomizePayload接口做类型校验
3. 在生命周期钩子、接口请求回调、事件处理函数中给属性赋值
   示例代码：

import { Component, OnInit } from '@angular/core';
// 按你的实际路径引入接口和依赖服务
import { AAAA } from './services/aaaa';
import { CustomizePayload } from './model';

@Component({
  selector: 'app-content-row',
  templateUrl: './content-row.component.html'
})
export class ContentRowComponent implements OnInit {
  // 声明属性，接口约束类型
  customizePayload: CustomizePayload;

  constructor(
    private aaaa: AAAA
    // 其他可注入的服务正常写在这里，不要放接口类型的参数
  ) {}

  ngOnInit() {
    // 直接赋值即可，TS会自动校验是否符合接口结构
    this.customizePayload = {
      itemId: 'item_001',
      itemVersion: 2,
      locale: 'zh-CN',
      originalItemId: 'item_001_old',
      originalItemVersion: 1,
      programId: 'prog_123',
      programNames: ['公开课', '训练营'],
      targetMode: 'preview'
    };

    // 如果数据来自接口请求，在订阅回调中赋值即可
    // this.apiService.getPayload().subscribe((res: CustomizePayload) => {
    //   this.customizePayload = res;
    // })
  }
}

如果这个数据需要从父组件传入，直接给属性加@Input()装饰器即可，符合Angular组件传值规范：

@Input() customizePayload: CustomizePayload;

父组件使用时直接绑定传值：

<app-content-row [customizePayload]="parentPayload"></app-content-row>

方案2：需要通过依赖注入传入配置 #

如果你的场景必须通过DI容器注入这个配置对象，需要手动创建运行时可识别的注入令牌（InjectionToken），因为接口运行时不存在，无法作为注入token使用：

1. 先在model.ts中新增注入令牌，保留原有接口定义：

import { InjectionToken } from '@angular/core';

export interface CustomizePayload {
  itemId: string;
  itemVersion: number;
  locale: string;
  originalItemId: string;
  originalItemVersion: number;
  programId: string
  programNames: string[];
  targetMode: string;
}

// 新增可注入的运行时token
export const CUSTOMIZE_PAYLOAD = new InjectionToken<CustomizePayload>('customize-payload');

2. 在对应模块/组件的providers数组中注册要注入的值：

@Component({
  selector: 'app-content-row',
  templateUrl: './content-row.component.html',
  providers: [
    {
      provide: CUSTOMIZE_PAYLOAD,
      useValue: {
        itemId: 'item_001',
        itemVersion: 2,
        locale: 'zh-CN',
        originalItemId: 'item_001_old',
        originalItemVersion: 1,
        programId: 'prog_123',
        programNames: ['公开课', '训练营'],
        targetMode: 'preview'
      }
    }
  ]
})

3. 在构造函数中用@Inject()装饰器注入：

import { Component, Inject } from '@angular/core';
import { AAAA } from './services/aaaa';
import { CustomizePayload, CUSTOMIZE_PAYLOAD } from './model';

@Component({/* 上述组件配置 */})
export class ContentRowComponent {
  constructor(
    private aaaa: AAAA,
    @Inject(CUSTOMIZE_PAYLOAD) private customizePayload: CustomizePayload
  ) {
    // 构造函数中即可正常访问注入的值
    console.log(this.customizePayload);
  }
}

• 只有被@Injectable()装饰的服务类，才能直接写在构造函数参数中被Angular DI自动识别，接口、普通类型别名都不可以直接作为注入token。
• 动态业务数据优先用方案1的类属性+Input传值/接口赋值的方式实现，不要滥用依赖注入传业务值。

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