web-dev-qa-db-ja.com

angularサービスにAPI_BASE_URL（文字列）を挿入する方法

この自動生成されたサービス（NSwagStudioによって）は、httpリクエストを実行するためにAPI_BASE_URL（InjectionToken）値を必要とします。

/* tslint:disable */
//----------------------
// <auto-generated>
//     Generated using the NSwag toolchain v11.12.16.0 (NJsonSchema v9.10.19.0 (Newtonsoft.Json v9.0.0.0)) (http://NSwag.org)
// </auto-generated>
//----------------------
// ReSharper disable InconsistentNaming

import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';

import { Observable } from 'rxjs/Observable';
import { Injectable, Inject, Optional, InjectionToken } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse, HttpResponseBase, HttpErrorResponse } from '@angular/common/http';

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL');

@Injectable()
export class DocumentService {
    private http: HttpClient;
    private baseUrl: string;
    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;

    constructor(@Inject(HttpClient) http: HttpClient, @Optional() @Inject(API_BASE_URL) baseUrl?: string) {
        this.http = http;
        this.baseUrl = baseUrl ? baseUrl : "";
    }

    getAll(): Observable<string[] | null> {
        let url_ = this.baseUrl + "/api/Document";
        url_ = url_.replace(/[?&]$/, "");

        let options_ : any = {
            observe: "response",
            responseType: "blob",
            headers: new HttpHeaders({
                "Content-Type": "application/json", 
                "Accept": "application/json"
            })
        };

        return this.http.request("get", url_, options_).flatMap((response_ : any) => {
            return this.processGetAll(response_);
        }).catch((response_: any) => {
            if (response_ instanceof HttpResponseBase) {
                try {
                    return this.processGetAll(<any>response_);
                } catch (e) {
                    return <Observable<string[] | null>><any>Observable.throw(e);
                }
            } else
                return <Observable<string[] | null>><any>Observable.throw(response_);
        });
    }

    protected processGetAll(response: HttpResponseBase): Observable<string[] | null> {
        ...........code
        ........
        ....
    }
}

誰かが私にInjectioTokenがどのように機能し、それをこのサービスにどのように挿入するかについていくつかの超簡単なヒントを教えてもらえますか？

Angular5-Nswag

angularnswag
10
alex

親モジュールで、API_BASE_URLのプロバイダーを作成します

export function getBaseUrl(): string {
  return AppConsts.baseUrl;
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: API_BASE_URL, useFactory: getBaseUrl }],
   bootstrap: [AppComponent]
})
export class AppModule {}

次に、静的プロパティなどを含むAppConstsクラスを定義します。

export class AppConsts {
  static baseUrl = "your_api_base_url"; 
}

私のために働いた、それが役に立てば幸い。このソリューションは、aspnet boilerpate angular projectに基づいています。これにより、アーキテクチャに関する最高の基準が得られます。ここに angular project +のURLを残しますthis 特定のコード 。

12
Guido Dizioli

上で述べたように、これをあなたの環境設定に入れるのが最善です、そしてAngularはあなたがいる環境に応じて適切なベースURLを置き換えます、例えばdev：

export const environment = {

    production: false,
    apiRoot: "https://localhost:1234",
};

次に、プロバイダーでuseValueを使用できます（単純化のために他はすべて削除されます）。

...
import { environment } from '@env/environment';

@NgModule({

    imports: [ ... ],

    declarations: [ ... ],

    providers: [

        {
            provide: API_BASE_URL,
            useValue: environment.apiRoot
        },
        ...
    ]

    exports: [ ... ]
})
export class AppModule {}

上記の@envエイリアスを使用するには、次のようにtsconfig.jsonに追加する必要があります。

{
    ...
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@env/*": [ "environments/*" ]
        },
    etc...
}

そしてAngularは、使用される--- envフラグに応じて、対応する環境設定を置き換えます。

7
Matt

すべての定数をenvironment.tsおよびenvironment.prod.tsに配置するためのベストプラクティス。新しいプロパティtheirを作成し、サービスにインポートします。コードは次のようになります。

// environment.ts
export const environment = {
  production: false,
  API_BASE_URL: "baseUrlOfApiForDevelopment",
};

// environment.prod.ts
export const environment = {
  production: false,
  API_BASE_URL: "baseUrlOfApiForProduction",
};

これを使用するには、サービスにインポートする必要があります。

2
Sandip Jaiswal