如何将Dinosaur模板实例正确导入Angular组件？

首先先指出你代码里的两个核心错误：

1. 模板对象字面量里用了分号，TS对象属性必须用逗号分隔，这会直接导致编译报错
2. 构造函数里试图注入Dinosaur接口是无效的——TS接口编译后会被完全移除，Angular无法识别并注入接口类型

下面是两种简单可行的方案，不需要额外服务：

方案一：直接导出常量模板（推荐） #

不需要用类包装，直接导出静态常量更简洁，适合纯模板场景：

// dinosaur.model.ts
export interface Dinosaur {
  height: number;
  weight: number;
  lifespan: number;
  diet: string;
  // 其他70个属性
}

// 直接导出模板常量
export const DINOSAUR_TEMPLATES = {
  herbivore: {
    height: 21,
    weight: 6.7,
    lifespan: 65,
    diet: 'herbivore'
    // 其他属性用逗号分隔
  } as Dinosaur,
  carnivore: {
    height: 8,
    weight: 1.7,
    lifespan: 52,
    diet: 'carnivore'
    // 其他属性用逗号分隔
  } as Dinosaur
};

在组件中直接导入使用：

// my-component.ts
import { DINOSAUR_TEMPLATES, Dinosaur } from './path/to/dinosaur.model';

@Component({
  // 组件配置
})
export class MyComponent {
  initialHerbivore: Dinosaur;

  constructor() {
    // 直接赋值模板
    this.initialHerbivore = DINOSAUR_TEMPLATES.herbivore;
    
    // 如果需要修改对象但不想污染原模板，做深拷贝：
    // this.initialHerbivore = JSON.parse(JSON.stringify(DINOSAUR_TEMPLATES.herbivore));
  }
}

方案二：修正类模板的写法 #

如果你一定要用类包装，先修正语法错误，再直接实例化类获取模板：

// dinosaur.model.ts
export interface Dinosaur {
  height: number;
  weight: number;
  lifespan: number;
  diet: string;
  // 其他70个属性
}

export class CustomDefaults {
  herbivoreTemplate: Dinosaur = {
    height: 21, // 把分号改成逗号
    weight: 6.7,
    lifespan: 65,
    diet: 'herbivore'
    // 其他属性用逗号分隔
  };

  carnivoreTemplate: Dinosaur = {
    height: 8,
    weight: 1.7,
    lifespan: 52,
    diet: 'carnivore'
    // 其他属性用逗号分隔
  };
}

组件中使用：

// my-component.ts
import { CustomDefaults, Dinosaur } from './path/to/dinosaur.model';

@Component({
  // 组件配置
})
export class MyComponent {
  initialHerbivore: Dinosaur;

  constructor() {
    const defaults = new CustomDefaults();
    this.initialHerbivore = defaults.herbivoreTemplate;
  }
}

为什么之前的写法报错？ #

• 构造函数注入Dinosaur接口：TS接口是编译时类型，编译后不存在，Angular找不到对应的注入提供商，必然报错；而且直接给注入参数赋值也不符合依赖注入的逻辑
• herbivoreTemplate类的写法完全冗余——你只需要符合Dinosaur接口的对象，没必要新建类，且@Inject(Object)是无效用法，Object不是合法的注入令牌

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