angular - ngx-translate 在 ng-bootstrap 模式下不起作用

Question

ngx-translate'管道在'模式translate中不起作用。ng-bootstrap

<div class="modal-header">
  <h3 class="modal-title">
    {{ 'MODAL.TITLE' | translate }}
  </h3>
</div>

<div class="modal-body">
</div>

<div class="modal-footer">
  <button class="btn btn-primary" type="button" (click)="activeModal.close('Close click')">
    <span class="fa fa-remove"></span> {{ 'BUTTON.CLOSE' | translate }}
  </button>
</div>

Answer 1

在ngx-translate 自述文件上，它写道：

注意：如果您仍在使用 Angular <4.3，请使用来自 @angular/http 的 Http 和 http-loader@0.1.0。

那么有什么区别呢？

在 Angular >= 4.3.x 中Http，TranslateModule您现在需要提供HttpClient：

app.module.ts ：

import {HttpClient, HttpClientModule} from "@angular/common/http"; //<-- before import {HttpModule, Http} from "@angular/http";
...
export function HttpLoaderFactory(httpClient: HttpClient) { //<-- before Http
    return new TranslateHttpLoader(httpClient, "i18n/", ".json");
}

@NgModule({
    imports: [
        ...
        HttpClientModule, //<-- before HttpModule
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient] //<-- before Http
          }
        })
    ],
    ...
})

我分叉并修复了 Angular 演示（4.3.6）：https ://plnkr.co/edit/1VZdWdQvat3lxaXYVZs3?p=preview