53

すべての angular 2 http リクエストのベース URL を設定しようとしています。以下は、私のアプリケーションの基本的なセットアップです。

class HttpOptions extends BaseRequestOptions {
  url:string = "http://10.7.18.21:8080/api/";
}


bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: HttpOptions})
]);


export class AppComponent {
  users:Array<User>
  constructor(private http: Http) {
    http.get("/users")
      .subscribe(res => this.users = res.json());
  }
}

私の設定から期待したように、リクエストはhttp://10.7.18.21:8080/api/usersに送信されません。代わりに、リクエストはhttp://localhost:8000/usersに送信されます。

angular 2アプリケーションでhttpリクエストのベースURLを設定するにはどうすればよいですか?

Angular 2.0.0-beta.0を使用しています。

4

9 に答える 9

11

Angular2 バージョン 2.2 の場合 (2016 年 12 月現在)

RC5 からの Angular はHTTP_PROVIDERS非推奨としてマークされ、物事を に移行しようとし@NgModuleています。上記の解決策は実際には適用されないため、ドキュメント. 他のいくつかの回答を相互参照し、ベース URL を実装する方法を見つけました。これが他の人に役立つことを願っています。

基本的な考え方は、ブートストラップで物事を行う代わりに、物事を に移動することAppModuleです。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, RequestOptions } from '@angular/http';


import { CustomRequestOptions } from './customrequest.options';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...
  ],
  providers: [
    { provide: RequestOptions, useClass: CustomRequestOptions }
  ],
  bootstrap: [ AppComponent ]
})

CustomRequestOptions を別の注入可能なサービスに移動します。

import { Injectable } from '@angular/core';
import { BaseRequestOptions, RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://localhost:9080' + options.url;
    return super.merge(options);
  }
}

GET以外のリクエストメソッド用に編集。

GET 以外のリクエスト タイプを送信しようとしている場合、前の方法では baseurl をリクエストに挿入できません。これは、Angular2が、マージ メソッドが CustomRequestOptions によってオーバーライドされていないRequestOptions以外の新しいものを生成するためです。this._defaultOptions（ソースコードはこちら）。

super.merge(...)そのため、CustomRequestOptions マージ メソッドの最後のステップで戻る代わりに、新しいインスタンスを生成しCustomRequestOptionsて、次の操作が確実に機能するようにしました。

import { Injectable } from '@angular/core';
import { RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    if (options !== null && options.url !== null) {
      options.url = 'http://localhost:9080' + options.url;
    }
    let requestOptions = super.merge(options)
    return new CustomRequestOptions({
      method: requestOptions.method,
      url: requestOptions.url,
      search: requestOptions.search,
      headers: requestOptions.headers,
      body: requestOptions.body,
      withCredentials: requestOptions.withCredentials,
      responseType: requestOptions.responseType
    });
  }
}

これは、POST、PUT、DELETE メソッドでも機能します。これが役に立てば幸いです。

于 2016-12-05T23:42:04.910 に答える
0

現在のユーザーの場合、これはAngular 2.4.8で実際に機能する例です

BaseCommonRequestOptionsとCommonRequestOptionsを分割して連鎖する理由のコードを次に示します。

import { BaseRequestOptions, Headers, RequestOptions, RequestOptionsArgs } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class BaseCommonRequestOptions extends BaseRequestOptions {

  merge(options?: RequestOptionsArgs): RequestOptions {
    return new CommonRequestOptions(super.merge(extracted(options)));
  }
}

/**
 * for inner merge when using post put patch delete...others method
 */
export class CommonRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    return new RequestOptions(super.merge(extracted(options)));
  }
}

/**
 * inject default values
 *
 * @param options
 * @returns {RequestOptionsArgs}
 */
export function extracted(options: RequestOptionsArgs) {
  console.log(options);
  if (!validUrl(options.url)) {
    options.url = 'http://localhost:3000' + (options.url ? options.url : "");
  }
  // use default header application/json, if content-type header was empty.
  if (options.headers != null) {
    let contentType = options.headers.get('content-type');
    if (contentType == null || contentType == '') {
      options.headers.append('content-type', 'application/json');
    }
  } else {
    options.headers = new Headers({ 'content-type': 'application/json' });
  }

  return options;
}

/**
 * validate url
 *
 * @param url
 * @returns {boolean}
 */
export function validUrl(url: string) {
  return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
}

于 2017-04-25T15:30:15.287 に答える