zoukankan      html  css  js  c++  java
  • angular2 国际化实现

    angular2国际化通过管道(pipe)的形式实现下载ng2-translate

    如何使用可以参照https://github.com/ocombe/ng2-translate

    自己写了一个小DEMO,可以在dev分支查看https://github.com/lyt308012546/ng2-webpack-demo

    import { Component } from '@angular/core';
    import { Http, HTTP_PROVIDERS } from '@angular/http';
    import {
        TranslateService,
        TranslateLoader,
        TranslatePipe,
        TranslateStaticLoader
    } from 'ng2-translate/ng2-translate';
    
    @Component({
        selector: 'translate',
        template: `
            <br>
            <br>
            <br>
            <button (click)="changeLang('en')">英文</button>
            <button (click)="changeLang('zh_cn')">中文</button>
            <br>
            <h1>{{ 'HELLO' | translate:{value: param} }}</h1>
        `,
        pipes: [TranslatePipe]
    })
    
    export class Translate {
        param: string = "world";
    
        // userLang: string = "en";
    
        constructor(public translate: TranslateService) {
            // var userLang = navigator.language.split('-')[0]; // use navigator lang if available
            // userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
            // // this language will be used as a fallback when a translation isn't found in the current language
            // translate.setDefaultLang('zh_cn');
            // // the lang to use, if the lang isn't available, it will use the current loader to get them
            translate.use("zh_cn");
    
            //获取值
            console.log(this.translate.instant("HELLO"));
        }
    
        changeLang(userLang) {
            // the lang to use, if the lang isn't available, it will use the current loader to get them
            this.translate.use(userLang);
        }
    }
    
    export const TRANSLATE_PROVIDERS = [
        HTTP_PROVIDERS,
        {
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
            deps: [Http]
        },
        TranslateService
    ];
  • 相关阅读:
    方法的重载
    this用法
    简单的随机数 代码和笔记
    java内存简单剖析
    day 28
    day 27
    day 26
    day 25
    day 24
    day 23
  • 原文地址:https://www.cnblogs.com/liuyt/p/5772037.html
Copyright © 2011-2022 走看看