Question

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

我的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时，它可以正常工作。

Answer 1

您正在使用TranslateHttpLoader在请求翻译时发出HTTP请求 - translate.use('en')。如果在HTTP调用返回之前调用instant(messageKey)方法，则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。

Answer 2

仅当加载翻译文件时才能使用TranslateService。如果要安全使用TranslateService.instant，可以编写一个角度解析器。解析器等待执行您的组件代码，直到可观察到的返回值。

这是代码：

----------------------------- RESOLVER --------------------- ---------------

@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"

我希望这可以帮助

Answer 3

只需用onReady包装$ translate.instant即可，

$ translate.onReady（function（）{ //这里的代码 }）

Answer 4

提醒一下：记得清空localStorage。是我的错。

Answer 5

您也可以拨打虚拟电话，然后等待响应。响应后，每个即时调用都会起作用，因为它确定加载了翻译。

async ngOnInit() {
  await this.translate.get('dummyTranslation').toPromise().then();
  this.translate.instant("realTranslation");

ngx-translate .instant返回键而不是值

5 个答案: