请建议我将角度应用翻译成不同语言的实现。我也用过ngx-translate。但是想立刻翻译整个应用程序?
答案 0 :(得分:0)
您可以使用角度i18n翻译技术
创建最小的Angular4项目 我们使用@ angular / cli在终端中创建一个名为“traduction”的新项目:
ng new traduction --prefix tr
cd traduction
ng serve -o
安装并加载ngx-translate
在项目文件夹“traduction”中使用终端中的npm:
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader
将必要的模块导入app.module.ts:
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
添加一个函数,返回“TranslateHttpLoader”并将其导出(AoT需要)。在这种情况下,我们创建的HttpLoaderFactory函数返回一个可以使用Http和.json加载Translations的Object,但是您可以编写自己的Class,例如使用全局JavaScript变量而不是加载文件,或使用Google Translate:< / p>
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
然后我们需要将模块导入@NgModule,这是导致Angular将此模块加载到AppModule中的导入:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
如果Angular使用关键字“load”或“submodule”而不是“import”会更容易,因为在开始时很容易混淆ES2015导入和NgModule导入。
注入TranslateService
在“app.component.ts”中我们现在初始化“TranslateService”,我们导入TranslateService:
import { TranslateService } from '@ngx-translate/core';
然后在AppComponent类中,我们注入服务并定义我们的默认语言。为了准备下一步,我们添加了一个切换语言的功能。
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
}
switchLanguage(language: string) {
this.translate.use(language);
}
创建.json翻译文件
我们现在在assets / i18n文件夹中创建我们的翻译文件:
<强>的src /资产/ I18N / en.json 强>
{
"Title": "Translation example",
"Intro": "Hello I am Arthur, I am 42 years old."
}
<强>的src /资产/ I18N / fr.json 强>
{
"Title": "Exemple de traduction",
"Intro": "Bonjour je m'appelle Arthur, j'ai 42 ans."
}
这些是简单的.json文件,将由我们在“app.module.ts”中创建的“TranslateHttpLoader”加载。
翻译简单标题和简介
在app.component.html中,我们在“h1”标记内添加一个带有translate“指令”的标题。该指令将获取标记内的文本并将其替换为匹配的翻译。如果您使用该指令,您必须确保标签内没有其他内容,只有文本。
作为第二个例子,我们使用“TranslationPipe”将一个标签转换为一个内联字符串。由于我们有时在要替换的翻译中有价值,我们可以将数据对象传递到“翻译”管道。
<h1 translate>Title</h1>
<div>
{{ 'Intro' | translate:user }}
</div>
集成语言切换器
我们现在可以将我们在app.component.ts中看到的语言切换器功能附加到按钮。在这种情况下,我们为每种语言创建一个按钮,并使用匹配的语言键调用switchLanguage()函数。
<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>
翻译带变量的句子
如前所述,您有时会有包含变量的句子。在这个小例子中,我们在“app.component.ts”中有一个年龄和名称的用户对象,我们想翻译一个包含这个值的句子:
...
export class AppComponent {
user = {
name: 'Arthur',
age: 42
};
...
}
因为我们将此对象传递到“translate”管道,现在我们可以使用{{placeholder}}符号在我们的翻译中使用它的属性。
<强>的src /资产/ I18N / en.json 强>
{
"Title": "Translation example",
"Intro": "Hello I am {{name}}, I am {{age}} years old."
}
<强>的src /资产/ I18N / fr.json 强>
{
"Title": "Exemple de traduction",
"Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans."
}
使用嵌套的.json对象
如果您希望能够更好地控制翻译,例如翻译页面块(从最终用户的角度来看)或组件(从开发人员的角度来看),可以采用以下解决方案:使用嵌套的.json对象,如git repo中所述。示例在-json文件中可能如下所示:
{
"Title": "Translation example",
"Intro": "Hello I am {{name}}, I am {{age}} years old.",
"Startpage": {
"TranslationSections": "Hello World"
},
"Aboutpage": {
"TranslationSections": "We are letsboot"
}
}
{
"Title": "Exemple de traduction",
"Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
"Startpage": {
"TranslationSections": "Bonjour Monde"
},
"Aboutpage": {
"TranslationSections": "Nous sommes letsboot"
}
}
并在相应的模板中
<h1 translate>Title</h1>
<div>
{{ 'Intro' | translate:user }}
</div>
<div>
{{ 'Startpage.TranslationSections' | translate }}
</div>
<div>
{{ 'Aboutpage.TranslationSections' | translate }}
</div>
<br/>
<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>