Question

我想知道如何用户翻译Ionic2中内置的管道：

http://ionicframework.com/docs/v2/api/translation/Translate/

要导入什么，在哪里，包含翻译单词的.json文件在哪里等等......

文档根本不清楚，所以我无法实现它。

Answer 1

在模板中这样（如果没有管道参数，它就不起作用）：

{{ 'Hello world!' | translate:'' }}

组件：

@Component({
  template: `
    <ion-header>
      <ion-navbar>
        <button menuToggle>
          <ion-icon name="menu"></ion-icon> 
        </button>
        <ion-title>My page</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content > 
        <h1>{{ 'Hello world!' | translate:'' }}</h1>
    </ion-content >
  `,
  directives: [],
  providers: [],
  pipes: [TranslatePipe]
})
export class MyPage {
    constructor(private translate:Translate) {
        this.translate.translations('fr', {
            'Hello world!': 'Salut les gens!'
        });
        this.translate.translations('de', {
            'Hello world!': 'Hallo zusammen!'
        });

        this.translate.setLanguage('fr');
  }
}

当然，我应该在app.ts中全局设置翻译服务。

希望它对你有用。

Answer 2

尝试关注this文档。

顺便说一下，你需要添加你的app.module：

import { TranslateStaticLoader, TranslateModule, TranslateLoader} from 'ng2-translate';

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

在导入部分（在IonicModule.forRoot（...）之后）：

TranslateModule.forRoot({
  provide: TranslateLoader,
  useFactory: (createTranslateLoader),
  deps: [Http] 
})

现在在你的app.component中添加你的初始化函数：

this.translate.setDefaultLang('en');
this.translate.use('en');

现在你需要在assets / i18n / * .json下创建一个es.json或en.json文件用于翻译，你可以在你的html中使用：

{{ 'notifications' | translate }}

希望这会对你有所帮助。

如何使用Ionic2的Translate管道？

2 个答案: