在Angular 4中手动注入Http [英] Inject Http manually in Angular 4
问题描述
我想手动引导Angular 4应用程序(使用CLI创建).
在main.ts
中,我这样做:
I want to manually bootstrap an Angular 4 app (created with CLI).
In main.ts
I am doing this:
const injector = ReflectiveInjector.resolveAndCreate([
Http,
BrowserXhr,
{provide: RequestOptions, useClass: BaseRequestOptions},
{provide: ResponseOptions, useClass: BaseResponseOptions},
{provide: ConnectionBackend, useClass: XHRBackend},
{provide: XSRFStrategy, useFactory: () => new CookieXSRFStrategy()},
]);
const http = injector.get(Http);
http.get('assets/configs/configuration.json')
.map((res: Response) => {
return res.json();
}).subscribe((config: Configuration) => {
configuration = config;
console.log(JSON.stringify(configuration));
platformBrowserDynamic().bootstrapModule(AppModule);
});
我似乎得到了一个有效的Http实例,但是当我使用它(http.get
)时,出现此错误:
I seem to get a valid Http instance but when I use it (http.get
) I get this error:
Uncaught TypeError: Cannot read property 'getCookie' of null
at CookieXSRFStrategy.webpackJsonp.../../../http/@angular/http.es5.js.CookieXSRFStrategy.configureRequest (vendor.bundle.js:141626)
我的http对象看起来像这样:
My http object looks like this:
推荐答案
您可以在Angular像这样开始使用ReflectiveInjector
之前使用HttpClient
服务:
You can use HttpClient
service before the Angular starts using ReflectiveInjector
like this:
import { ReflectiveInjector } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
const injector = ReflectiveInjector.resolveAndCreate(getAnnotations(HttpClientModule)[0].providers);
const http = injector.get(HttpClient);
http.get('/posts/1').subscribe((r) => {
ConfigurationService.configuration = <Configuration>JSON.parse(config);
platformBrowserDynamic().bootstrapModule(AppModule);
});
此行:
getAnnotations(HttpClientModule).providers
引用在HttpClientModule
上注册的所有提供程序,因此您不必手动指定它们. 此答案详细说明了getAnnotations
功能.
references all providers that are registered on the HttpClientModule
so you don't have to specify them manually. This answer explains the getAnnotations
function in great details.
我展示的方法类似于将HttpClientModule
导入到AppModule
时所执行的操作:
The approach I've shown is "sort of" the similar to what you're doing when importing HttpClientModule
into the AppModule
:
@NgModule({
imports: [HttpClientModule, ...],
})
export class AppModule {}
有关详细信息,请参见此朋克车.
See this plunker for details.
这篇关于在Angular 4中手动注入Http的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!