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

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').如果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在任何地方使用.

Answer 2

只有在加载翻译文件时才能使用 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"

我希望这可以帮助