ionic2 ng2-translate 在模态下不起作用

Question

我在 ionic2 中将 ng2-translate 与模态结合使用时遇到问题。正常页面中的翻译工作正常。

这是我的 app.module.ts 文件：

import ...
@NgModule({
    declarations: [
    MyApp,
    //...
  ],
  imports: [
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
    IonicModule.forRoot(MyApp),
  ],
  exports: [
    TranslateModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    //...
  ],
  providers: [Storage, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, 'assets/i18n', '.json');
}

例如，在我的 dashboard 中，我可以使用以下 HTML 代码并获得正确的翻译：

<h2>{{'general.tasks' | translate}}</h2>

但是，当我现在通过以下代码从 ionic-angular 使用 ModalController 打开一个新模式时：

let taskModal = this.modalCtrl.create(TaskCancelPage, {'task': task});
taskModal.onDidDismiss(data => {
    console.log(data);
});
taskModal.present();

在新的 TaskCancelPage 中具有相同的 HTML 代码

<h2>{{'general.tasks' | translate}}</h2>

但在这里我只得到 general.tasks 而不是翻译后的值。

Answer 1

这对我有用，这就是我所做的：

在[项目]/src//app.module.ts:

import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate';
export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

import { TranslationService } from '../services/translation/translation';
//custom pipe
import { CapitalizePipe } from '../custom-pipes/capitalize/capitalize';    

@NgModule({
  declarations: [
     ...,
     CapitalizePipe,
     ....
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]})
  ],
  bootstrap: [IonicApp],
  entryComponents: [
     ...
  ],
  providers: [
    TranslationService,
    .... 
  ]
})

在 [项目]/src/app/app.component.ts 中

        ...
        import { TranslationService } from '../services/translation/translation';
        import { CapitalizePipe } from '../custom-pipes/capitalize/capitalize';

        @Component({
          templateUrl: 'app.html',
        })
        export class MyApp {
          ....

          constructor(
            ...,
            public translationService: TranslationService, ...
          ) {}
          ....
        ngOnInit() {
            return this.defineLang().then(
             (event) => {
                 console.log(MyApp.CLASS_TAG + " this.defineLang() fired: ",event , " getLangs is " , this.translationService.getLangs());
               this.[yourFunctionToDefineRootPage]();
             }
           );
         }
    ...
      private defineLang(): Promise<any> {
        let appDfltLang = 'fr';
          this.translationService.getBestLanguageAccordingToBrowserAvailability(appDfltLang);
        let promise = this.translationService.langSettingOnInit();
        return promise;
      }
....
}

在[项目]/src/custom-pipe/capitalize/capitalize.ts:

import { PipeTransform, Pipe } from '@angular/core';
@Pipe({name:'capitalize'})

export class CapitalizePipe implements PipeTransform {
       transform(value?: any,args?: any): any{
                return (!!value)?value.charAt(0).toUpperCase()+value.substr(1):value;
       }

        }

在 [项目]/src/services/translation/translation.ts

import { Injectable } from '@angular/core';
import { LangChangeEvent, TranslateService } from 'ng2-translate/ng2-translate';
import { Observable } from 'rxjs/Observable';
import { CapitalizePipe } from '../../custom-pipes/capitalize/capitalize';

@Injectable()
export class TranslationService {

    private static readonly CLASS_TAG = "TranslationService";

    private availableLang: Array<string> = ["fr","en","nl"];
    private defaultLanguage:string = "en";

    constructor(
        private translateService: TranslateService
    ) { }

    setDefaultLang(lang: string) {
        return this.translateService.setDefaultLang(lang);
    }


    use(lang: string): Observable<any> {
        let brLgSubStr:string = this.getBrowserLang().substr(0,2);
        let findLg:number = this.availableLang.indexOf(brLgSubStr);
        if(findLg==-1){
            lang = this.defaultLanguage;
        }

        return this.translateService.use(lang);
    }

    getCurrentLang(): string {
        return this.translateService.currentLang;
    }

    getDefaultLang(): string {
        return this.translateService.getDefaultLang();
    }

    getBestLanguageAccordingToBrowserAvailability(appDfltLang:string) {
    console.log(TranslationService.CLASS_TAG + "getBestLanguageAccordingToBrowserAvailability() starts ");

        let brLang = this.getBrowserLang().substr(0,2);
        let brLangAmongPossibilities:boolean = false;

        for(let i in this.availableLang){
            if(this.availableLang[i]==brLang){
                brLangAmongPossibilities=true;
            }
        }
        if(brLangAmongPossibilities){
            this.translateService.use(brLang);
        } else {
            this.translateService.use(appDfltLang);

        }

        this.translateService.setDefaultLang(appDfltLang);

    }

    getBrowserLang():string {
        return this.translateService.getBrowserLang();
    }

    getLangs():Array<string> {
        return this.translateService.getLangs();
    }

    getAvailableLangs():Array<string>{
        return this.availableLang;
    }

    langSettingOnInit(): Promise<LangChangeEvent> {
        return new Promise((resolve, reject) => {
            this.translateService.onLangChange.subscribe(
                (event) => {
                    resolve(event);
                },
                (error) => {
                    console.log(TranslationService.CLASS_TAG + "onLangChangeInit() error: " ,error);
                    reject(error);
                }
            );
        });
    }

    instant(key: string | Array<string>, interpolateParams?: Object): string | any {
        let result =  key && this.translateService.instant(key, interpolateParams);
        result = (result !== key) ? result : '';

        if (key && !result) {
            console.error(`[not translated key]::${key}`);
        }

        return result;
    }

     instantCapitalize(key: string | Array<string>, interpolateParams?: Object): string | any {

        return new CapitalizePipe().transform(this.instant(key));
    }
}

然后在您想要使用它的页面（模式或非模式）中导入服务：

import { TranslationService } from '[root folder]/services/translation/translation';

并在页面的构造函数中声明服务：

@Component({
    selector:'custom',
    templateUrl: 'custom.html'

})
export class CustomPage {

    constructor(...,public translationService:TranslationService,...){
    }
    ....
}

在你的 html 模板中调用它：

<[some text tag]>{{ "[some id word from your trad file]" | translate | capitalize }}</some text tag]>

或者如果您不想将第一个字母大写：

<[some text tag]>{{ "[some id word from your trad file]" | translate  }}</some text tag]>

例如，如果您在页面中调用AlertController，您可以这样做 -:

this.translationService.instantCapitalize("[some id word from your trad file]");

或者如果您不想将第一个字母大写：

this.translationService.instant("[some id word from your trad file]");

出于某种原因，它只读取 [project]/wwww/assets/i18n/[2 chars language code].json 下的 TRAD 文件

Answer 2

对于 ionic 5 在当前模块中声明模态组件或页面 前任： 声明：[HomePage,FilterComponent]