角度-更改构建资产文件夹中的数据

奥蒂斯·奥丁顿

我希望我的角度应用程序可以在没有服务器的情况下作为独立应用程序使用。

在Assets文件夹中是图像，声音文件等，以及一个game.json文件，其中包含应用程序的业务数据（在服务器上，该数据将存储在DB中或通过Rest调用）。

一切都很好。使用“ ng build”，我可以通过在我的OS-文件管理器中打开没有http服务器的index.html来创建一个完整的构建。

问题是我无法在构建后更改game.json 的内容，因为它似乎以某种方式包含在构建中。更改将被忽略，它会将内容冻结为已编译状态。

由于我将仅在本地运行该应用程序，因此我以这种方式读取数据：

类型：d.ts：

declare module "*.json" {
   const value: any;
   export default value;
 }

game.service.ts：

import * as data_json from 'assets/data/game.json';

@Injectable()
export class GameService {

  constructor() { }
      loadGames(): Observable<Game> {
        return Observable.of(JSON.parse(JSON.stringify(data_json)));
      }
}

我不使用HTTPClient，因为会遇到CORS问题。读取数据可以正常工作，但是文件game.json中的更改将被完全忽略。

有没有一种方法可以使该文件“可修改”，以便可以在构建的assets文件夹中对其进行更改？

Trimantra软件解决方案

您可以从资产文件夹中获取数据，如下所示，还可以更改其运行时间。

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class GameService {
  private gameData: any;

  constructor(private http: HttpClient) {}

  loadGameData() {
    return this.http
      .get("/assets/data/game.json")
      .toPromise()
      .then(data => {
        this.gameData= data;
      });
  }

  get gameData() {
    if (!this.gameData) {
      throw Error("Game file not loaded!");
    }
    return this.gameData;
  }
}

app.module.ts的更改：

import { NgModule, APP_INITIALIZER } from "@angular/core";
import { GameService } from "./services/GameService.service";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    [
      {
        provide: APP_INITIALIZER,
        multi: true,
        deps: [GameService],
        useFactory: (gameService: GameService) => {
          return () => {
            return gameService.loadGameData();
          };
        }
      }
    ]
  ],
  bootstrap: [AppComponent]
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。