ngx-translate
的translate
管道在ng-bootstrap
的modal内部不起作用。
<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>
在ngx-translate
Readme上,写道:
注意:如果您仍然使用Angular <4.3,请使用@ angular / http中的Http和[email protected]。
那有什么区别?
在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 Demo(4.3.6):https://plnkr.co/edit/1VZdWdQvat3lxaXYVZs3?p=preview