我在 Angular(v6) 中使用 ngx-translate 和延迟加载方法。我遇到了 translate.instant('Title')
的问题
使用翻译管道可以正常工作。({{'Title' | translate}}
)
使用 translate.instant()
方法默认语言始终有效,但我无法通过共享模块中的语言选择器(用于切换语言的选择组件)更改语言。
我不想使用 this.translate.onLangChange.subscribe
每次,有没有使用这种方法的替代方法?
最佳答案
使用 translate.stream('Title') 而不是 translate.instant('Title')。它返回一个 Observable。
另见 https://github.com/ngx-translate/core
这个怎么运作:
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {Observable} from 'rxjs';
@Component({
selector: 'app-root',
template: `
<div>
<h2>{{ 'HOME.TITLE' | translate }}</h2>
<label>
{{ 'HOME.SELECT' | translate }}
<select #langSelect (change)="translate.use(langSelect.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>
</label>
<ng-container *ngIf="name$ | async as name">
<p>Observable {{ name }}</p>
</ng-container>
</div>
`,
})
export class AppComponent {
public name$: Observable<string>;
constructor(public translate: TranslateService) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');
const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
public ngOnInit(): void {
this.name$ = this.translate.stream('HOME.TITLE');
}
}
这是一个 stackblitz 演示的链接:https://stackblitz.com/edit/github-az4kgy
关于angular - 即时翻译的 ngx-translate 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55401875/