是否可以在 stackblitz 上使用 http.get() 检索 json 数据文件

Question

我有一个 angular 服务，如下所示：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getDataHttp(): Observable<any> {
    return this.http.get(
      'http://localhost:4200' + '/assets/data.json'
    );
  }
}

运行 angular 在本地，这将在 assets 目录中检索 json 文件 data.json。

是否可以在 Stackblitz 上做同样的事情？ url 会是什么样子？

编辑：Stackblitz- https://stackblitz.com/edit/angular-ivy-zptuyp

Answer 1

是的，有可能。

直接从assets给出路径，像这样-

this.httpClient.get('assets/data.json');

查看工作示例here

即使你也可以在本地使用同样的方法。

Answer 2

由于包含数据的文件已经存在于项目中，因此不需要任何本地主机或其他东西。当你有一个实际的后端 API 来获取你想要的数据时，你将需要它。但由于它只是您应用程序中的一个文件，因此您不需要这样做。

另外，如果您确定您的应用程序本身会有数据，而不是将其存储为 json 文件，您可以将其存储为常量值并从任何您想要的地方读取它。

请在此 stackblitz 中找到它：https://stackblitz.com/edit/angular-ivy-d1ocqb?file=src%2Fapp%2Fapp.component.html

是否可以在 stackblitz 上使用 http.get() 检索 json 数据文件

Is it possible to retrieve a json data file with http.get() on stackblitz

angular

stackblitz