Angular中声明初始化类并在多组件下拉菜单中复用的实现方法

架构老林

2026-9-30

现有实现的合理性

你当前的写法本身是可以正常运行的，但如果是多个组件复用该数据，更符合Angular开发规范的方案是使用可注入的服务来托管静态数据，利用Angular的依赖注入能力避免重复实例化，维护性更强。

方法1：直接使用你现有的类实现

在需要调用数据的组件TS文件中导入对应类和接口

// 注意替换为你实际的文件相对路径
import { Cars, Car } from './cars.model.ts';

在组件中实例化类获取数据

export class YourComponent {
  carOptions: Car[] = [];

  constructor() {
    // 实例化Cars类获取数据列表
    this.carOptions = new Cars().Items;
  }
}

在组件模板中绑定下拉菜单

<select name="car">
  <option *ngFor="let car of carOptions" [value]="car.id">{{ car.name }}</option>
</select>

方法2：推荐的服务实现（更适合多组件复用场景）

你可以直接修改cars.model.ts为可注入服务，不需要额外创建文件：

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

export interface Car{
  id:string;
  name:string;
}

@Injectable({
  providedIn: 'root' // 声明为全局单例，所有组件可直接注入
})
export class CarsService {
  // 直接声明静态数据即可，不需要单独在constructor赋值
  Items: Car[] = [
    { id: "1", name: "Honda" },
    { id: "2", name: "Hyundai" },
    { id: "3", name: "Nissan" },
    { id: "4", name: "Suzuki" },
    { id: "5", name: "Audi" },
    { id: "6", name: "BMW" },
    { id: "7", name: "Mercedes" },
    { id: "8", name: "Toyota" }
  ];
}

组件中注入服务获取数据

import { CarsService, Car } from './cars.model.ts';

export class YourComponent {
  carOptions: Car[] = [];

  constructor(private carsService: CarsService) {
    this.carOptions = this.carsService.Items;
  }
}