ng2-translate

i18n国际化，演示angular控件ng2-translate

app.module

import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
//..
export function createTranslateStaticLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');   // 发送请求，拿到i18n文件夹下的json后缀文件
}
@NgModule({
    imports: [
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: createTranslateStaticLoader,
            deps: [Http]
        })
    ]
})

app.component

import { TranslateService } from 'ng2-translate';
@Component({
    selector: 'app-root'
})
export class AppComponent {
    constructor(
        private translate: TranslateService
    ) {}
    ngOnInit() {
        this.translate.addLangs(['zh', 'en']);
        this.translate.setDefaultLang('zh');
        const browserLang = this.translate.getBrowserLang();
        this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh' );
    }
}

模版使用

<p>{{ word | trnaslate }}<p>