翻译服务在 Ionic3 中的两个页面中不起作用

Question

您好，我正在尝试在 Ionic 3 中使用 i18n 开发语言翻译。为此，我使用了ngx-translate服务。它仅在单个页面中工作，但在多个页面中不起作用 你能帮我解决这个问题吗？

感谢和问候

我在assests/i18n/文件夹中有一个json文件，文件名为es.json, en.json, hin.json.

我也为测试页面编写了下面的代码，但它显示了一条错误消息，称为

Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translate' could not be found ("
    </ion-list>
    <p>{{[ERROR ->]'HELLO WORLD!' | translate}}</p>
    <ion-item>
"): 

请给我一个解决方案。

这是HTML代码的某些部分：

import { TranslateService } from '@ngx-translate/core';
.
.
.
.
<ion-content padding>  
   <ion-list inset class="no-border">
      <ion-item>
         <ion-label>{{'HELLO WORLD!' | translate}}</ion-label>
         <ion-input required type="text"></ion-input>
      </ion-item> 
   </ion-list>
   <p>{{'HELLO WORLD!' | translate}}</p>
   <ion-item>
      <ion-label>Select Language</ion-label>
      <ion-select #l (ionChange)="languagefilter(l.value);">
         <ion-option value="en">English</ion-option>
         <ion-option value="es">Spanish</ion-option>
         <ion-option value="hin" (click)="new()">Hindi</ion-option>
      </ion-select>
   </ion-item>
   <button ion-button (click)="chainaddition()">Login</button>
</ion-content>

这是 TS 代码

 constructor(public navCtrl: NavController, public translate: TranslateService) {
    let temp = localStorage.getItem("language");
    if(temp=='en'){
      translate.setDefaultLang('en');
      alert("English")
    } else {
      translate.setDefaultLang(temp);
      localStorage.removeItem("temp");
      // alert(this.alertmessage);
    }
  }
  languagefilter(value) {
    localStorage.setItem("language", value);
    location.reload();
   }
  chainaddition() {
    this.navCtrl.push("TestPage");
  }

Answer 1

translate管道是TranslateModule的一部分。与服务不同，component、directive和pipe不是全球性的。您需要导入要使用的管道模块。

您需要在每个模块中导入TranslateModule(不要调用forRoot函数(，或者您可以创建一个SharedModule并将此SharedModule导入到其他任何地方，如文档中所述

如果使用在多个其他功能模块中导入的共享模块，则可以导出翻译模块以确保不必在每个模块中导入它。

@NgModule({
    exports: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }

注意：永远不要在共享模块中调用 forRoot 静态方法。你 最终可能会在喷油器中出现不同的服务实例 树。但如有必要，您可以使用 for Child。