Question

目前我的 main.ts 文件如下所示：

declare const require; 
const translations = require("raw-loader!./locale/messages.de.xlf");

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
  ]
});

我想使用提供此字符串的服务，而不是对此"raw-loader!./locale/messages.de.xlf"进行硬编码，例如：

const translations = require(translationService.localeString); //does not work!

有可能这样做吗？我已经为此创建了一个服务，但我找不到将其注入main.ts文件的方法。

Answer 1

要使用该服务，我们需要它的实例。我们可以使用Injector在没有构造函数的情况下创建实例。

DemoService：

@Injectable()
export class DemoService {
  test="hi";
  localeString="abc";
}

Main.ts：

    import {Injectable, ReflectiveInjector } from '@angular/core';
    var injector = ReflectiveInjector.resolveAndCreate([DemoService]);
    var demoService = injector.get(DemoService)
    alert(demoService.test)
    platformBrowserDynamic().bootstrapModule(AppModule, {
     providers: [
      { provide: TRANSLATIONS, useValue: demoService.localeString },
      { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
     ]
    });

现在我们可以使用变量或服务方法，因为我正在使用alert（）

演示：http://plnkr.co/edit/Df6xSxJPaCZVupyMmtUp?p=preview

我们不需要服务来访问常量值。另一种推荐的方法是将常量变量保存在单独的文件中（即environment.ts）。

environment.ts：

export const environment = {
  localeString: "raw-loader!./locale/messages.de.xlf"
};

修改main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: environment.localeString },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
  ]
});

Answer 2

Angular 9 的解决方案（基于 mohit uprim 答案）：

platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(ref => {
  const configService = ref.injector.get(DemoService);
  alert(demoService.test)
 })
.catch(err => {
   console.log(err);
});

在main.ts文件中注入Angular服务

2 个答案: