abp & ng-alain 改造前端 十四 —— 头部

---

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。
ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。
官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

1. 目录:https://www.jianshu.com/p/589af988637c
2. 源代码:https://github.com/ZhaoRd/abp-alain

---

功能

ng-alain框架，登录之后，可以再头部区域更改当前语言体系，将abp支持的语言体系引入并能切换

---

目录结果

目录结构

需要修改的文件是i18n.component.ts

代码如下：

import { Component, Inject,Injector,OnInit } from '@angular/core';
import {
  SettingsService,
  MenuService,
  TitleService,
  ALAIN_I18N_TOKEN,
} from '@delon/theme';
import { I18NService } from '@core/i18n/i18n.service';

import { AppComponentBase } from '@shared/app-component-base';

import * as _ from 'lodash';

@Component({
  selector: 'header-i18n',
  template: `
  <nz-dropdown>
    <div nz-dropdown>
      <i class="anticon anticon-edit"></i>
      {{ 'language' | translate}}
      <i class="anticon anticon-down"></i>
    </div>
    <ul nz-menu>
    <li nz-menu-item *ngFor="let item of languages"
        [nzSelected]="item.name === currentLanguage.name"
        (click)="changeLanguage(item.name)">
        <i class="{{item.icon}}"></i>
        {{item.displayName}}
        </li>
      <!--
      <li nz-menu-item *ngFor="let item of langs"
        [nzSelected]="item.code === settings.layout.lang"
        (click)="change(item.code)">{{item.text}}</li>
        -->
    </ul>
  </nz-dropdown>
  `,
})
export class HeaderI18nComponent extends AppComponentBase implements OnInit{
  langs: any[];

  languages: abp.localization.ILanguageInfo[];
  currentLanguage: abp.localization.ILanguageInfo;


  constructor(injector: Injector,
    public settings: SettingsService,
    @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
  ) {
    super(injector);
    this.langs = this.i18n.getLangs();
  }

  ngOnInit() {
    this.languages = _.filter(this.localization.languages, l => !l.isDisabled);
    this.currentLanguage = this.localization.currentLanguage;
  }

  change(lang: string) {
    this.i18n.use(lang);
    this.settings.setLayout('lang', lang);
  }

  /***
   * 切换多语言
   * 存储cookie值并刷新当前页面
   */
  changeLanguage(languageName: string): void {
    abp.utils.setCookieValue(
      'Abp.Localization.CultureName',
      languageName,
      new Date(new Date().getTime() + 5 * 365 * 86400000), // 5 year
      abp.appPath,
    );

    location.reload();
  }

}

更换内容很简单，和登录界面一样，获取所有的语言信息，并提供切换语言的函数即可

---

运行结果

头部多语言切换

---

我的公众号

我的公众号

---

源代码

源代码:https://github.com/ZhaoRd/abp-alain