angular - 为 Angular 2 http 请求设置基本 url

Question

我正在尝试为我所有的 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。

Answer 1

对于 angular 4.3+ 和@angular/common/http

可以用拦截器来完成

@Injectable()
export class ExampleInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url = 'http://myurl.com';
    req = req.clone({
      url: url + req.url
    });
    return next.handle(req);
  }
}

应用程序模块.ts

import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ...
  ],
  providers: [
    AppComponent,
    { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

编辑:Angular 4.3 中引入了 HttpClient 和 HttpInterceptor