[英]Problem accessing service from export function
I want to access my angular service from export function.我想从出口 function 访问我的 angular 服务。
I read all the related questions form SO, however for some reason the solutions doesn't work for me.我阅读了 SO 中的所有相关问题,但是由于某种原因,这些解决方案对我不起作用。
I added the app-injector.ts helper.我添加了 app-injector.ts 助手。 It looks like this:它看起来像这样:
import {Injector} from '@angular/core';
/**
* Allows for retrieving singletons using `AppInjector.get(MyService)` (whereas
* `ReflectiveInjector.resolveAndCreate(MyService)` would create a new instance
* of the service).
*/
export let AppInjector: Injector;
/**
* Helper to set the exported {@link AppInjector}, needed as ES6 modules export
* immutable bindings (see http://2ality.com/2015/07/es6-module-exports.html) for
* which trying to make changes after using `import {AppInjector}` would throw:
* "TS2539: Cannot assign to 'AppInjector' because it is not a variable".
*/
export function setAppInjector(injector: Injector) {
if (AppInjector) {
// Should not happen
console.error('Programming error: AppInjector was already set');
} else {
AppInjector = injector;
}
}
I added the injector to the AppModule constructor and called the SetAppInector from its body like this:我将注入器添加到 AppModule 构造函数中,并从其主体中调用 SetAppInector,如下所示:
export class AppModule {
constructor(injector: Injector) {
setAppInjector(injector);
}
}
And, I use the AppInjector to inject the service in my getTranslatedPaginatorIntl() function that is declared in my AppModule:而且,我使用 AppInjector 在我的 AppModule 中声明的 getTranslatedPaginatorIntl() function 中注入服务:
export function getTranslatedPaginatorIntl() {
const translate = AppInjector.get(TranslateService);
const paginatorIntl = new MatPaginatorIntl();
paginatorIntl.itemsPerPageLabel = translate.instant('Items per page');
paginatorIntl.nextPageLabel = translate.instant('Next page');
paginatorIntl.previousPageLabel = translate.instant('Previous page');
// paginatorIntl.getRangeLabel = serbianRangeLabel;
return paginatorIntl;
}
The function gets called in the providers part of the @NgModule declaration (I guess that's where the problem lies, because the constructor is probably called after this so the Injector doesn't get injected in time): function 在@NgModule 声明的提供者部分中被调用(我想这就是问题所在,因为在此之后可能会调用构造函数,因此注入器不会及时注入):
providers: [
ApiService,
LoaderService,
{ provide: MatPaginatorIntl, useValue: getTranslatedPaginatorIntl() },
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: MAT_DIALOG_DATA, useValue: {} },
{ provide: MatDialogRef, useValue: {} },
]
You don't need to hack your way around the injector - Angular has a supported API for your use-case.您无需在注射器周围破解 - Angular 为您的用例提供受支持的 API。 Instead of { provide: Service, useValue: someFunc() }
you can tell angular you want to use a factory function with optional dependencies { provide: Service, useFactory: myFactoryFunc, deps: [MyDepService] }
.而不是{ provide: Service, useValue: someFunc() }
你可以告诉 angular 你想使用带有可选依赖项的工厂 function { provide: Service, useFactory: myFactoryFunc, deps: [MyDepService] }
。
In your case it would look something like this:在您的情况下,它看起来像这样:
// The factory function (now with transateService as parameter!)
export const getTranslatedPaginatorIntl = (translateService:TranslateService) => {
const paginatorIntl = new MatPaginatorIntl();
paginatorIntl.itemsPerPageLabel = translate.instant('Items per page');
paginatorIntl.nextPageLabel = translate.instant('Next page');
paginatorIntl.previousPageLabel = translate.instant('Previous page');
return paginatorIntl;
}
And in your app.module:在你的 app.module 中:
providers: [
ApiService,
LoaderService,
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: MAT_DIALOG_DATA, useValue: {} },
{ provide: MatDialogRef, useValue: {} },
{
provide: MatPaginatorIntl,
// The factory function (don't call the function here, angular will do that for you!
useFactory: getTranslatedPaginatorIntl,
// Provide your dependencies, they will become parameters for the function when angular calls it
deps: [TranslateService]
},
]
For further explanation and details, I suggest the official angular documentation .进一步的解释和细节,我建议官方 angular 文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.