web-dev-qa-db-ja.com

Ionic2 / Angular2-カスタム構成ファイルを読み取ります

Ionic2プロジェクトに取り組んでおり、新しいカスタムJSON構成ファイルを作成する必要があります。作成してhttp.getからアクセスするためのチュートリアルをいくつか見つけましたが、getリクエストから呼び出すのは変だと思います。ルートフォルダー（すべての構成JSONがある場所）に配置し、ファイルを直接開いたり読み取ったりします。

それが可能かどうか、あるいは推奨されるかどうかさえわかりませんか？これが私がいくつかの意見と解決策を持っているためにここに投稿している理由です:)

ありがとう

angulartypescriptionic-frameworkionic2ionic3
11
Julian Le Calvez

個人的には、http.getの方法を使用してconfig.jsonファイルを読み取り、構成情報を処理するのは好きではありません。コードにjsonファイルを含めて読み取るだけです。Angular2とTypeScriptを使用しているので、クラス、インターフェイスを使用して、より凝った方法でそれを実行してみませんか？

次に紹介する内容は、最初は複雑に見えるかもしれませんが（読んだ後は非常に簡単で理解しやすいでしょう）、Angular2を学び始めたときに、それらがどのように処理されるかの例を見ました構成ファイル依存性注入ガイド そして私は構成情報（APIエンドポイント、デフォルト値など）を処理するために取り組んだアプリでそれに従いました）。

ドキュメントによると：

クラス以外の依存関係

[...]

多くの場合、アプリケーションは多くの小さな事実（アプリケーションのタイトルやWeb APIエンドポイントのアドレスなど）を使用して構成オブジェクトを定義しますが、これらの構成オブジェクトは必ずしもクラスのインスタンスであるとは限りません。

クラス以外の依存関係のプロバイダートークンを選択するための1つの解決策は、OpaqueTokenを定義して使用することです。

したがって、URLなどを使用して構成オブジェクトを定義し、次にOpaqueTokenを定義して、オブジェクトに構成を挿入するときにそれを使用できるようにする必要があります。

すべての構成をapp-config.tsファイルに含めました

// Although the ApplicationConfig interface plays no role in dependency injection, 
// it supports typing of the configuration object within the class.
export interface ApplicationConfig {
  appName: string;
  apiEndpoint: string;
}

// Configuration values for our app
export const MY_CONFIG: ApplicationConfig = {
  appName: 'My new App',
  apiEndpoint: 'http://www...'
};

// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new OpaqueToken('config');

OpaqueTokenとは最初は混乱するかもしれませんが、このオブジェクトを挿入するときに名前の競合を回避するための文字列にすぎません。あなたはこれについての素晴らしい投稿を見つけることができます ここ 。

次に、次のように必要なページに含める必要があります。

import { NavController } from 'ionic-angular/index';
import { Component, OpaqueToken, Injectable, Inject } from "@angular/core";

// Import the config-related things
import { MY_CONFIG_TOKEN, MY_CONFIG, ApplicationConfig } from 'app-config.ts';

@Component({
  templateUrl:"home.html",
  providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }]
})
export class HomePage {

  private appName: string;
  private endPoint: string;

  constructor(@Inject(MY_CONFIG_TOKEN) private config: ApplicationConfig) {
    this.appName = config.appName;
    this.endPoint = config.apiEndpoint;
  }
}

providers配列に含める方法に注意してください

providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }]

そして、設定オブジェクトのインスタンスを取得する方法をインジェクターに指示する方法

@Inject(MY_CONFIG_TOKEN) config: ApplicationConfig

[〜＃〜]更新[〜＃〜]

OpaqueTokenは、型情報をサポートしていないため、v4.0.0以降非推奨になりました。代わりに、InjectionToken<?>を使用してください。

したがって、これらの行の代わりに：

import { OpaqueToken } from '@angular/core';

// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new OpaqueToken('config');

今、私たちは使用する必要があります

import { InjectionToken } from '@angular/core';

// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new InjectionToken<ApplicationConfig>('config');
14
sebaferreras

さまざまなソリューションを読んだ後、私はこのハッキーな実装を使用することになりました。うまくいけば、すぐに利用できる素敵なネイティブソリューションがあるでしょう：

import { NgModule } from '@angular/core';
import { environment as devVariables } from './environment.dev';
import { environment as testVariables } from './environment.test';
import { environment as prodVariables } from './environment.prod';

export function environmentFactory() {
  const location = window.location.Host;
  switch (location) {
    case 'www.example.org': {
      return prodVariables;
    }
    case 'test.example.org': {
      return testVariables;
    }
    default: {
      return devVariables;
    }
  }
}

@NgModule({
  providers: [
    {
      provide: 'configuration',
      useFactory: environmentFactory
    }
  ]
})
export class EnvironmentsModule {}

そして、必要に応じて、例：

import { Injectable, Injector, Inject } from '@angular/core';

import { AuthenticationService } from '../authentication';

@Injectable()
export class APIService {

  private http: Http;
  private apiURL: string;
  protected authentication: AuthenticationService;

  constructor(
    public injector: Injector,
    @Inject('configuration') public configuration: any
  ) {
    this.http = injector.get(Http);
    this.authentication = injector.get(AuthenticationService);
    this.apiURL = configuration.apiURL;    
  };

...
3
Eydrian