自定义 ngx-translate 加载器，接收无法设置未定义的属性“http”

Question

我正在使用 ngx-translate 和自定义加载器设置 Ionic 4 项目，以从外部域加载 JSON 翻译。我一直在关注这些人：https://forum.ionicframework.com/t/ngx-translate-translatehttploader-with-external-url/99331/4

Stackblitz 链接：https://stackblitz.com/edit/ionic-v4-jdfbh6

所以这是我的自定义加载程序（提供程序）。

@Injectable()
export class TranslationProvider implements TranslateLoader {
  constructor(private http: HttpClient) {
    console.log('Hello TranslationProvider Provider');
  }

  getTranslation(lang: string): Observable<any> {
    return Observable.create(observer => {
      this.http.get<any>(Environment.base_api + '/static/translations/' + lang + 'json', {
      headers: {'Content-Type': 'application/json'}}).subscribe((res: Response) => {
        observer.next(res.json());
        observer.complete();
      });
    });
  }
}

在我的 app.module.ts（导入）中：

imports: [
  BrowserModule,
  IonicModule.forRoot(App),
  IonicStorageModule.forRoot(),
  HttpClientModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: (TranslationProvider),
      deps: [HttpClient]
    }
  })
],

我收到的错误信息是：

TypeError: Cannot set property 'http' of undefined at TranslationProvider (http://localhost:8100/build/main.js:1073:19)

Answer 1

我制作了一个工作示例应用程序，要点如下： https://gist.github.com/olivercodes/a34be66e5b69edcd96038e5a4518b16e

您需要将@Injectable() 更改为

@Injectable({
  providedIn: 'root'
})

另外，请确保这些是您的导入位置：

// In the service file
import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core'

// in app.module
import { TranslateLoader } from '@ngx-translate/core'
import { HttpClient, HttpClientModule } from '@angular/common/http';

使用我提供的要点并确保您的导入是正确的。