json - 如何在 ionic 3 中使用 ngx-translate 解决“ERROR SyntaxError: Unexpected token / in JSON at position 0”?
问题描述
在使用 ngx-translate 更改 ionic 3 中的语言时,我遇到了错误。
我的代码是:1.我已经安装
**npm install @ngx-translate/core @ngx-translate/http-loader --save**
2.然后我在app.module.ts中导入了以下3个:
要使用 ngx-translate,必须首先将其导入并添加到应用程序 NgModule 中的 imports 数组中。以下是如何执行此操作的示例:
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';
3.然后导出功能:
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
4.然后在@ngModule 中导入模块
@NgModule({
declarations: [
MyApp,
MainPage,
SearchPipe,
// SortPipe
],
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
}),
]
})
5.然后在app.component.ts文件中导入TranslateService:
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
并放了
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
console.log("onLangChange", event.translations)
})
this.translate.onDefaultLangChange.subscribe((event: LangChangeEvent)
=> {
console.log("onDefaultLangChange", event.translations)
})
在构造函数中
6. then in home.ts
import { TranslateService, LangChangeEvent } from '@ngx- translate/core';
在构造函数中:
translate.setDefaultLang('en');
外部构造函数:
public changeLanguage(language)
{
console.log("language", language);
this.translate.use(language);
}
7.在home.html中
<ion-title>{{ 'title' | translate }}</ion-title>
<div *ngIf="forUserContent"></div>
<div *ngIf="forSupplierContent">
<button ion-button full class="review-btn"(click)="showreviewlist()">{{ 'review' | translate }}</button>
</div>
<div *ngIf="forBothContent">
<button ion-button full class="review-btn" (click)="showreviewlist()">{{ 'review' | translate }}</button>
</div>
<button ion-button (click)="changeLanguage('de')">{{ 'german' | translate }}</button>
<button ion-button (click)="changeLanguage('en')">{{ 'english' | translate }}</button>
8.在 home.module.ts 中:
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
HomeappPage,
],
imports: [
IonicPageModule.forChild(HomeappPage),
HeaderComponentModule,
FooterComponentModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
})
],
exports: [
HomeappPage,
TranslateModule
]
})
9.创建两个具有特定语言的json文件:将语言数据存储在.json文件中。
1.en.json
{
"title": "HOME",
"german": "German",
"english": "English",
"review": "Review List"
}
2.de.json
{
"title": "ZUHAUSE",
"german": "Deutsch",
"english": "Englisch",
"review": "Überprüfungsliste",
}
当我更改应用程序中的语言时,我想要解决方案并从特定的 json 文件中获取字符串
解决方案
创建一个演示项目
ionic start DemoProject super
检查 app.module.ts 文件。他们使用 HttpClient 而不是 Http。我的正在使用这个配置。
如果您的 Angular 版本为 5,这是配置。您可以从此处获取并安装正确的版本
@ngx-translate/core
。https://github.com/ngx-translate/core@ngx-translate/http-loader
推荐阅读
- ember.js - 升级到 Ember 3.20.2 后获取模型未定义错误
- publish-subscribe - 什么是 DCPS,它与 DDS 有什么关系?
- javascript - Socket JS 在 onload 方法中不起作用
- dolphindb - 与范围域和列表域相比,哈希域的主要应用是什么?
- spring-boot - 放心使用 Spring Boot 和 Kotlin 进行 E2E Api 测试
- python - 托盘图标在窗口启动文件夹(.pyw 扩展名)上不起作用
- google-apps-script - GAS getSharingAccess() 限制范围
- python - Python:相对导入
- sockets - linux中的套接字TCP - 客户端无法插入用户名
- pine-script - 为什么不计算平均值并返回 NaN?