关于angular：ngx-translate .instant返回键而不是值


ngx-translate .instant returns key instead of value

我正在尝试制作一种方法，该方法可以接受字符串键并通过使用translate.instant(parameter)返回翻译后的字符串值。 问题是它返回键(参数)。 通常，如果找不到翻译，则将其返回。 我认为问题在于在加载程序加载翻译之前调用该方法。

我的app.module.ts导入：

1
2
3
4
5
6
7
    TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
})

createTranslateLoader函数：

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

在我的app.component中：

1
2
3
4
constructor(public translate: TranslateService){
   translate.setDefaultLang('en');
   translate.use('en');
}

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

相关讨论

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

1
2
3
4
5
6
7
8
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。

相关讨论

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

这是代码：

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

1
2
3
4
5
6
7
8
9
10
11
@Injectable()
export class TranslationLoaderResolver {

    constructor(private translate: TranslateService){
    }

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

}

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

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

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

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

我希望这可以帮助

相关讨论

只需将$ translate.instant与onReady包装在一起，如下所示：

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