Angular国际化翻译

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';
    export function HttpLoaderFactory(http:Http){
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');// 加载制定路径下的国际化文件，并指定格式
    }
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
    AppComponent
      ],
      imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TranslateModule.forRoot({
        loader:{
        provide:TranslateLoader,
        useFactory:HttpLoaderFactory,
        deps:[Http]
        }
    })
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    import { Component } from '@angular/core';
    import { TranslateService } from '@ngx-translate/core'
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      constructor(private translate: TranslateService) {
    // 添加语言支持
    translate.addLangs(['zh', 'en']);
    // 设置默认语言，一般在无法匹配的时候使用
    // 不建议设置该值，会导致国际化文件会被加载两次
    // 如果是使用instant的方法处理国际化，会导致大概率翻译不了的情况，和性能有关
    translate.setDefaultLang('zh');
    // 获取当前浏览器环境的语言比如en、 zh
    // 也可以根据自己的设置进行赋值
    let broswerLang = translate.getBrowserLang();
    translate.use(broswerLang.match(/en|zh/) ? broswerLang : 'zh');
      }
    }

    <h1>
      {{'app.menu' | translate}}
    </h1>