Angular + ant design布局中实现国际化

单独一个angular页面做国际化非常简单，网上已经有很多介绍，只需在页面上添加一个按钮即可实现。但是在实际项目中，不可能每个页面都添加一个按钮，这不符合用户习惯，特别是在使用框架布局的时候，按钮一般放在父页面，当点击父页面时，子页面的语言应当跟随改变，这应该如何实现呢？

　　首先，见图。采用ant design的布局，页面分成三个部分，左侧是菜单，右侧顶部布置语言转换按钮，右侧下部放置具体子页面。

具体实现方法：

1、创建一个服务类language.service.ts，代码如下。这个服务里主要是有两个方法，一个是设置语言setValue，在父页面点击按钮时，将所选的语言代码设置好。getValue方法则是子页面通过订阅获得改变后的值。

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LanguageService {

  constructor() { }

  private  language: Subject=new Subject;

  public getValue() : Observable {
     return this.language.asObservable(); 
    } 

  public setValue(value: string) : void { 
     this.language.next(value); 
    }
}

2、父页面中的设置。在父页面引入language.service 和translate.service，constructor里设置如下：

constructor(
    ……
    private storeService: LanguageService,
    private translateService: TranslateService
    ) { 
      const browserLang = this.translateService.getBrowserLang();//获得浏览器语言
      translateService.setDefaultLang(browserLang); //设置默认语言
      this.radioValue=browserLang;  //按钮值设定
      }
    }

3、子页面的设置。在父页面引入language.service 和translate.service，constructor里设置如下：

  constructor(
              ……
              private languageService: LanguageService,
              private translateService: TranslateService,
              
              ){
                const browserLang =     
                this.translateService.getBrowserLang();
                translateService.setDefaultLang(browserLang);
                this.languageService.getValue().subscribe((lang) => { 
                  this.translateService.use(lang);
                 });
               }

　　这样简单配置，点击父页面的按钮，子页面就马上可以转换语言啦。

　　然而，还有一个小的bug，就是如果父页面已经将语言转换成非浏览器语言，而子页面还没有加载，这时候去点击子页面链接，加载子页面，会发现第一次加载时子页面的语言还是浏览器默认语言，而没有自动变成父页面中已经选定的语言，这是因为子页面还没有加载时，它是监听不到父页面发出的指令的。这就需要用sessionstorage来稍加修改一下设置：

1、修改setValue方法：

public setValue(value: string) : void { 
     this.language.next(value); 
     sessionStorage.setItem("lang",value);
    }

2、子页面中增加一个判断是否有sessionStorage的语句：

{
                const browserLang = this.translateService.getBrowserLang();
                translateService.setDefaultLang(browserLang);
                if(sessionStorage.getItem("lang")!=null){
                  translateService.use(sessionStorage.getItem("lang"));
                }
                this.languageService.getValue().subscribe((lang) => { 
                  this.translateService.use(lang);
                 });
               }

Angular + ant design布局中实现国际化

相关

标签