yarn add @ngx-translate/core @ngx-translate/http-loader
// 或者
npm i @ngx-translate/core @ngx-translate/http-loader --save

import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

export const TranslateProvider = {
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
};

import { TranslateProvider } from './provider';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    // ...省略
    TranslateModule.forRoot(TranslateProvider),
  ],
})
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.scss']
})
export class AppComponent {

  isCollapsed = false;
  lang: string;

  constructor(
    private translate: TranslateService,
  ) {
    // 初始化的时候进行默认语言设置
    const value = localStorage.getItem('admin-lang');
    this.lang = value || 'zh-CN';
    this.translate.setDefaultLang(this.lang);
    this.translate.use(this.lang);
  }

  // 语言切换的时候设置-当前项目只设置了中文和英文，所以是中英文切换
  changeLang() {
    const nextLang = this.lang === 'zh-CN' ? 'en' : 'zh-CN';
    localStorage.setItem('admin-lang', nextLang);
    this.translate.use(nextLang);
    this.lang = nextLang;
  }
}

{
  "app_name": "Admin",
  "more_actions": {
    "title": "More Actions"
  }
}

{
  "app_name": "后台管理",
  "more_actions": {
    "title": "更多操作"
  }
}

<h1>{{ 'app_name' | translate }}</h1>

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent implements OnInit {

  moreAction: string = '';

  constructor(
    private translate: TranslateService,
  ) { }

  ngOnInit() {
    this.moreAction = this.translate.instant('more_actions.title');
  }
}