Angular 14中如何通过HTML属性指定本地JSON路径加载数据

核心实现思路 #

通过Angular的输入属性接收data-source指定的本地JSON路径，用浏览器原生fetch API异步加载文件——既避免了import导致的单例数据共享问题，又比HttpClient更轻量简洁。

分步实现 #

1. 组件代码改造 #

在my-component.component.ts里定义输入属性，监听路径变化并加载数据：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, OnChanges {
  // 绑定模板里的data-source属性
  @Input('data-source') dataSource!: string;
  // 存储当前实例的独立数据
  instanceData: any;

  ngOnInit(): void {
    this.loadData();
  }

  // 当data-source变化时重新加载
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['dataSource'] && !changes['dataSource'].firstChange) {
      this.loadData();
    }
  }

  private async loadData(): Promise<void> {
    try {
      const res = await fetch(this.dataSource);
      if (!res.ok) throw new Error(`加载失败: ${res.statusText}`);
      this.instanceData = await res.json();
      // 数据加载完成后可做预处理
      this.handleData();
    } catch (err) {
      console.error('JSON加载错误:', err);
      // 加载失败时给默认值，避免组件崩溃
      this.instanceData = {};
    }
  }

  private handleData(): void {
    // 这里写数据格式化、业务逻辑处理
    console.log('当前实例数据:', this.instanceData);
  }
}

2. 确保JSON文件可访问 #

• 把JSON文件放到项目的assets目录下（比如assets/data/data1.json），默认配置下构建时会自动打包这些文件。
• 如果JSON在自定义目录（比如src/localPath），需要在angular.json里配置assets路径，保证构建时不会遗漏：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/localPath" // 添加你的JSON目录
            ]
          }
        }
      }
    }
  }
}

3. 模板中使用组件 #

直接按你想要的方式写，每个实例指定不同路径即可：

<div>
  <my-component data-source="./assets/data/data1.json" />
  <my-component data-source="./assets/data/data2.json" />
</div>

关键问题解释 #

• 为什么不能用import？：import是编译阶段加载，JSON内容会被打包进组件代码，所有实例共享同一份引用数据——改一个实例的数据，其他实例也会跟着变，完全不符合多实例独立的需求。
• 为什么用fetch而不是HttpClient？：fetch是浏览器原生API，不用注入服务，代码更简洁；本地静态文件读取场景下，完全不需要HttpClient的额外功能，轻量够用。

注意点 #

• 路径尽量用绝对路径（比如/assets/data/data1.json），避免路由切换后相对路径失效。
• 生产构建后检查dist目录，确认JSON文件是否被正确打包。
• 一定要处理加载失败的情况，避免组件因为数据错误卡壳。

内容的提问来源于stack exchange，提问作者Michael Kintscher they-them