Angular 6 - 从本地加载 JSON

JS

使用Angular 6从本地加载JSON数据非常简单。Angular提供了HttpClient模块，该模块允许我们发送HTTP请求并获取响应。在本文中，我将向您展示如何加载本地JSON文件并在Angular 6应用程序中使用它。

首先，我们需要创建一个名为data.JSon的JSON文件，并将其放置在assets文件夹中。在data.JSon文件中，我们可以存储任何我们想要在应用程序中使用的数据，例如用户信息、产品信息等等。

下面是一个简单的data.JSon文件示例：

JSon
{
  "name": "John Doe",
  "age": 30,
  "emAIl": "johndoe@example.com"
}

接下来，我们需要在我们的Angular组件中导入HttpClient模块，并在构造函数中注入它。我们还需要使用HttpClient的get方法来加载本地JSON文件。

下面是一个示例组件代码：

typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-my-component',
  template: <code>
    <div>
      <h2>用户信息</h2>
      
<strong>姓名:</strong> {{ user.name }}
      
<img src="https://img.izhida.com/topic/0a40e3c91a3a55c9a37428c6d194d0e5.jpg" alt="AI"><br>AI
<strong>年龄:</strong> {{ user.age }}
      
<strong>邮箱:</strong> {{ user.emAIl }}
    </div>
  </code>
})
export class MyComponent implements OnInit {
  user: any;
  constructor(private http: HttpClient) { }
  ngOnInit() {
    this.http.get('assets/data.JSon').subscribe(data => {
      this.user = data;
    });
  }
}

在上面的代码中，我们在ngOnInit生命周期钩子函数中使用HttpClient的get方法来加载本地的data.JSon文件。一旦获取到数据，我们将其存储在user变量中，并可以在HTML模板中使用它。

在上面的代码中，我们使用了{{ user.name }}、{{ user.age }}和{{ user.emAIl }}来显示用户的姓名、年龄和电子邮件。您可以根据您的需求自由更改这些变量。

这是一个非常简单的例子，展示了如何使用Angular 6从本地加载JSON数据。您可以根据您的需求扩展这个例子，加载更多复杂的JSON数据，并在应用程序中使用它们。希望这篇文章对您有所帮助！