npm包nebularcn使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

Nebular是一套基于Angular框架的UI库，它提供了大量UI组件和主题，方便开发者快速构建web应用。而nebularcn包则是Nebular官方的中文翻译文档，方便中文开发者使用。

本文将向你介绍如何使用nebularcn包，以及如何在自己的项目中设置中文文档。

安装

在开始使用nebularcn包之前，需要先安装Nebular和Angular：

npm install @nebular/theme @angular/core @angular/common @angular/forms --save

接着安装nebularcn包：

npm install nebularcn --save

使用

可以直接在你的项目中引入nebularcn包，然后获取翻译后的文本。

以下是一个示例代码：

import { NebularCN } from 'nebularcn';

export class AppComponent {
  constructor(private nebularCN: NebularCN) {}

  ngOnInit() {
    console.log(this.nebularCN.get('button'));
  }
}

此时控制台将输出中文的按钮文本。

同时也可以在html中使用translate管道

<h1>{{ 'actions.save' | translate }}</h1>

设置与使用自定义翻译文档

Nebular提供了一套默认的英文文档，同时也提供了中文翻译文档nebularcn。如果需要自定义翻译文档，可以按照以下步骤：

创建一个自定义的翻译文件，命名为my-i18n.json，并按照Nebular官方文档提供的格式进行翻译。

{
  "button": "按钮",
  "home.header": "主页",
  "actions.save": "保存"
}

在项目中创建一个MyTranslations服务，并注入TRANSLATIONS和TRANSLATIONS_FORMAT。

import { Translation, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';

export class MyTranslations implements Translation {
  // 自定义翻译文件
  public translations = require('./my-i18n.json');

  get(key: string): any {
    return this.translations[key];
  }
}

export const MY_TRANSLATIONS = new MyTranslations();

export function getMyTranslationProviders(): Provider[] {
  return [
    { provide: TRANSLATIONS, useValue: MY_TRANSLATIONS.translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
  ];
}

在项目的app.module.ts中，导入nebularcn包，并将其添加到MyTranslations服务的translations属性中：

import { NebularCN } from 'nebularcn';
import { MY_TRANSLATIONS } from './my-translations';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,

    // 导入nebularcn包
    NebularCN.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    MY_TRANSLATIONS
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private nebularCN: NebularCN) {
    // 将翻译文件添加到MyTranslations中
    MY_TRANSLATIONS.translations = Object.assign({}, nebularCN.translations, MY_TRANSLATIONS.translations);
  }
}

这样，当Nebular UI组件运行时，将会从MyTranslations服务中获取翻译文档。

总结

本文向你介绍了如何使用nebularcn包以及如何在自己的项目中设置自定义的翻译文档。希望本文对你有所帮助，也希望你在开发过程中可以多多使用Nebular UI库，提高你的开发效率和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53da4