angular i18n 国际化 多语言

参考扬帆天下博客:http://www.cnblogs.com/yangfantianxia/p/7878823.html

在他的基础上把设置语言的部分写在app.component.ts里,这样就变成全局加载了,使用时候只需要在html页写上{{ 'Id' | translate }} 就完成了,用起来很爽!

 app.component.ts

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

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})

export class AppComponent implements OnInit {
    title = 'Angular4.3';
    constructor(private translateService: TranslateService) { }
    ngOnInit(): void {
        this.translateService.addLangs(["zh", "en"]);
        this.translateService.setDefaultLang("en");
    }
}

i18n.ts  这个页主要实现切换语言

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

@Component({
    templateUrl: 'app/i18n/i18n.component.html'
})

export class i18nComponent implements OnInit {
    title = 'i18n';
    constructor(private translateService: TranslateService) { }
    ngOnInit(): void { }
}

{{title}}
<div>
    <button type="button" class="btn btn-outline-secondary" placement="right" ngbTooltip="English" (click)="this.translateService.use('en')">
        English
    </button>
    <button type="button" class="btn btn-outline-secondary" placement="right" ngbTooltip="中文" (click)="this.translateService.use('zh')">
        中文
    </button>
</div>
<div>
    {{ 'Id' | translate }}
    {{ 'Name' | translate }}
    {{ 'Age' | translate }}
    {{ 'Gender' | translate }}
    {{ 'Date of birth' | translate }}
    {{ 'City' | translate }}
</div>

效果图: