使用 ngx-translate 翻译 Angular

Question

**你好，我安装了 ngx-translate，我添加了import { defaultLanguage } from './../assets/i18n/en.json'; 在 app.component.ts 中，错误是：

“找不到模块'./../assets/i18n/en.json'。考虑使用'--resolveJsonModule'来导入带有'.json'扩展名的模块”，但我有这个名字的文件夹和文件。 需要做什么？ 我是 Angular 的初学者。

Answer 1

无论您是否是初学者都无关紧要，因为它是一个外部 Angular 库，而不是 Core Angular 特定主题。

如果您阅读文档，它会说您正在使用 http 请求下载 json 文件并加载它。 所以你必须有一个可以存储它们的服务器。

我与您分享，如何在没有任何 http 请求的情况下“注入”i18n。 因此，它将构建到您的源代码中。

// @ symbol mean is this folder not angular module. So it is just natural folder.
import { I18N_JAPAN } from './@i18n/jp';
import { I18N_ENGLISH } from './@i18n/en';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        // ...
        TranslateModule.forRoot(), // <-- need
        // ...
    ],
    providers: [ /* ... */],
    bootstrap: [AppComponent],
})
export class AppModule {
    constructor(translateService: TranslateService) {
        translateService.setTranslation('jp', I18N_JAPAN); <-- you can add directly
        translateService.setTranslation('en', I18N_ENGLISH); <-- you can add directly
        translateService.setDefaultLang('en');
        translateService.use(translateService.getBrowserLang());
    }
}

export const I18N_ENGLISH = {
    'my-i18n': {
        path: {
            to: 'display text'
        }
    }
}

并使用：

• 在 html 中： {{ 'my-i18n.path.to' | translate }} {{ 'my-i18n.path.to' | translate }}
• 在 TS: translateService.instant('my-i18n.path.to')

在文档中： https : //github.com/ngx-translate/core

配置

默认情况下，没有可用的加载程序。 您可以使用 setTranslation 手动添加翻译，但最好使用加载器。 您可以编写自己的加载程序，也可以导入现有的加载程序。 例如，您可以使用 TranslateHttpLoader，它将使用 HttpClient 从文件加载翻译。