Question

我在stackblitz工具中创建了应用程序。

它没有从assets/data/architecture.json获取数据。

但是从网址上看它装得很好。在app.component.ts文件中，我评论了行(// apiUrl2 = '/assets/data/architecture.json'; )。

请告诉我错误的地方。

下面是我的stackblitz代码网址。 Stackblitz Code URL

Answer 1

您对 /assets/data/architecture.json 的请求将不会返回任何内容，因为您需要在localhost上运行的服务器将处理您的静态文件，并在请求时将返回它们。我建议你看一下这个指南 - ＆gt; THIS 如果您想在不发出网络请求的情况下访问json，可以在应用中导入并要求。

declare function require(url: string);
const data= require('../assets/data/architecture.json');

数据将存储您的json的内容。

Answer 2

如果您想在应用加载时加载'/assets/data/architecture.json'，我建议使用App_Initializer。

创建一个ArchitecturePropertyLoaderService文件，该文件将在App Loading时用于初始化：

   import {ConfigProperties} from '../_model/config.property';
    import {Injectable} from '@angular/core';
    import {Http} from '@angular/http';
    import {Observable} from 'rxjs';

    @Injectable()
    export class ArchitecturePropertyLoaderService {

      stationUrl: string;
      // ArchitectureProperties must be a map of your /assets/data/architecture.json //
      confProp: ArchitectureProperties;
      constructor(private http: Http) {
      }

      getConfFile() {
        return this.http.get('assets/data/architecture.json')
          .subscribe(data => {
            this.confProp = data.json();
            // Your Code //
          }, error =>{
            console.log(error);
          }
          );
      }
//Can Access this from your code anywhere, just call this method //
  getConfigPropData(): ArchitectureProperties {
    return this.confProp;
  }
    }

在AppModule中，添加一个类，如下所示：

export function startupServiceFactory(startupService: ArchitecturePropertyLoaderService ): Function {
    return () => startupService.getConfFile();
}

现在，在您的提供者部分中，使用：

providers: [
       {
            // Provider for APP_INITIALIZER
            provide: APP_INITIALIZER,
            useFactory: startupServiceFactory,
            deps: [ArchitecturePropertyLoaderService],
            multi: true
        }],

无法使用角度5从资产获取数据

2 个答案: