34

我正在尝试使用 translate.instant(parameter) 制作一个接受字符串键并返回翻译后的字符串值的方法。问题是它返回键（参数）。如果没有找到翻译，通常会返回。我认为问题在于该方法在加载程序加载翻译之前被调用。

我的 app.module.ts 进口：

    TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
})

createTranslateLoader 函数：

    export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

在我的 app.component 中：

constructor(public translate: TranslateService){
   translate.setDefaultLang('en');
   translate.use('en');
}

当我使用管道翻译 html 时，它可以正常工作。

4

5 回答 5

45

您正在使用TranslateHttpLoader请求翻译时发出 HTTP 请求 - translate.use('en')。如果您instant(messageKey)在 HTTP 调用返回之前调用该方法，ngx-translate 将返回密钥，因为它还没有翻译。因此，您应该使用该get(messageKey)方法来获取翻译 - 它是异步的并返回Observable：

this.translateService.get('hello.world').subscribe((translated: string) => {
    console.log(res);
    //=> 'Hello world'

    // You can call instant() here
    const translation = this.translateService.instant('something.else');
    //=> 'Something else'
});

instant只有当您确定翻译已经加载（如代码示例中所示）时，您才能使用该方法，或者您可以编写自定义同步翻译加载器并instant在任何地方使用。

于 2017-09-14T12:05:07.147 回答
15

只有在加载翻译文件时才能使用 TranslateService。如果您想安全地使用 TranslateService.instant，您可以编写一个角度解析器。解析器等待执行你的组件代码，直到 observable 返回一个值。

这是代码：

-------------------------解析器------------------------ ------------

@Injectable()
export class TranslationLoaderResolver {

    constructor(private translate: TranslateService){
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>{
        return this.translate.get("last.dummy"); //
    }

}

----------------------路由模块------------------

let routing = RouterModule.forChild([
    {path: "dashboard", component: DashboardComponent, resolve: {model: TranslationLoaderResolver},
     children: [
        ........//here you can omit Resolver
        },
}

-----文件 i18n-----

In last line add the line----> "last.dummy"="dummy translation"

我希望这可以帮助

于 2019-01-17T20:43:44.727 回答
2

您也可以进行虚拟呼叫，并等待响应。响应后，每个即时调用都会起作用，因为它肯定会加载翻译。

async ngOnInit() {
  await this.translate.get('dummyTranslation').toPromise().then();
  this.translate.instant("realTranslation");
于 2021-04-16T08:44:16.223 回答
0

只需像这样用 onReady 包装你的 $translate.instant ：

$translate.onReady(function () { //这里的代码 })

于 2020-01-07T22:28:02.637 回答
0

只是提醒一下：记得清除 localStorage。这是我的错误。

于 2021-03-08T21:48:06.970 回答