npm 包 @logixware/ngx-translate-core 使用教程

前言

随着 Web 应用的发展，前端技术已经成为一个不可或缺的部分。当我们开发一个支持多语言的 Web 应用时，如何选择一款好用的国际化库就成为很重要的问题。本文介绍一款国际化库：@logixware/ngx-translate-core，它是一个为 Angular 项目设计的翻译库，提供了一些功能来管理多语言的支持。

安装

可以通过指令 npm install --save @logixware/ngx-translate-core 或者 yarn add @logixware/ngx-translate-core 来安装。

配置

导入模块

在 Angular 的模块里导入 TranslateModule 模块：

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------

-----------
  -------- -
    --------------
    -----------------
    -------------------------
      ------- -
        -------- ----------------
        ----------- ------ ----------- -- --- --------------------------
        ----- ------------
      -
    --
  --
  ---------- --------------
--
------ ----- --------- - -

在这个配置中，我们需要注意以下几点：

  • 需要导入 HttpClientModule 模块支持 HTTP 请求；
  • 使用 TranslateLoader 实现语言文件的加载；
  • 使用 TranslateHttpLoader 库以供應用程序使用 HTTP 进行文件的加载。

Language Files

  • 然后在 assets 文件夹里面新建 en.json 文件。
-
  ------- -
    -------- -------
    ---------- --------- ----------
  -
-
  • 然后在 assets 文件夹里面新建 zh.json 文件。
-
  ------- -
    -------- -----
    ---------- ---- ----------
  -
-

使用

我们现在可以使用 TranslateService 进行翻译。

获取翻译文本

------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------

------------
  --------- -----------
  --------- -
    ------ ------------ - --------- -------
    ----- -------------- - ---------------- ------- ------
  -
--
------ ----- ------------ -
  ------------------- ---------- ----------------- -
    -------------------------------
  -
-

变更翻译语言

例如将语言变更为中文：

------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------

------------
  --------- -----------
  --------- -
    ------ ------------ - --------- -------
    ----- -------------- - ---------------- ------- ------

    ------- --------------------------------------------
    ------- ---------------------------------------
  -
--
------ ----- ------------ -
  ------------------- ---------- ----------------- -
    -------------------------------
  -

  --------------------- -------- ---- -
    -----------------------------
  -
-

结语

@logixware/ngx-translate-core 是一个非常好用的国际化库，不仅可以轻松实现多语言支持，而且还具有很高的语言切换速度和易用性。通过本文的学习，相信不少开发者可以更加轻松地实现国际化功能。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bc8967216659e2445d8

阅读全文

猜你喜欢

  • npm 包 @nitrog7/react-native-camera 使用教程

    在移动端应用中，拍摄照片和视频是常见的需求。React Native 框架提供了一些基础的组件让我们可以在应用中使用摄像头，而 @nitrog7/react-native-camera 则进一步扩展了...

    4 年前
  • npm 包 @nitzan/future.js 使用教程

    介绍 @nitzan/future.js 是一个非常有用的前端工具包，它可以帮助你更轻松地处理异步逻辑。在现代的前端应用中，异步逻辑通常难以处理，因为涉及到多个网络请求、用户输入和服务器响应等因素。

    4 年前
  • npm 包 @netbasal/content-loader 使用教程

    简介 @netbasal/content-loader 是一个能够在加载内容时显示加载器的 npm 包。该组件适合在使用 Angular 和 React 等前端框架进行开发时使用。

    4 年前
  • npm 包 @nju33/react-intersection-observed 使用教程

    在前端开发过程中，有时需要判断某个元素是否在可视区域内，这时就可以使用 Intersection Observer API。但是，使用原生的 Intersection Observer API 这个过...

    4 年前
  • npm 包 @nju33/react-slack 使用教程

    简介 @nju33/react-slack 是一个 React 组件，可以方便地将 Slack Web API 的功能集成到 React 应用程序中。 本文档将介绍如何使用 @nju33/react-...

    4 年前
  • npm 包 @nju33/react-typing 使用教程

    前言 在前端开发中，输入卡顿或者延迟是非常不友好的用户体验。为了解决这个问题，我们可以使用 @nju33/react-typing 这个 npm 包来实现快速的文本打字效果。

    4 年前
  • npm 包 @nkbt/geovis 使用教程

    简介 @nkbt/geovis 是一个基于 D3.js 的 JavaScript 库，用于创建地图和地图交互，可以方便地实现地理信息的可视化展示与交互。 安装 使用 npm 进行安装： --- ---...

    4 年前
  • Cast Class into Another Class or Convert Class to Another

    在前端开发中，我们常常需要将一个类转换为另一个类或者将一个子类强制转换为它的父类。这种类型的问题通常可以通过 TypeScript 中的类型断言和类型转换来实现。 类型断言 类型断言（Type Ass...

    4 年前
  • npm包 @nkbt/geovis-mock使用教程

    简介 @nkbt/geovis-mock 是一个通过模拟位置信息生成虚拟地图数据的 npm 包。该包可以用于前端开发中，在没有实际地图API的情况下进行测试。 安装 可以通过 npm 安装 @nkb...

    4 年前
  • npm 包 @nkbt/geovis-server 使用教程

    背景介绍 @nkbt/geovis-server 是一款基于 Node.js 平台的地图可视化服务端开发框架，可快速搭建出具有高性能、高效率的地图可视化应用。该框架提供了一系列的功能模块和 API 接...

    4 年前
  • npm包@newworldcode/talkie使用教程

    前言 在前端开发过程中，我们经常需要在页面中增加语音互动的功能，可以为用户提供更便捷的交互方式。在这方面，@newworldcode/talkie就是一个很好的选择。

    4 年前
  • npm 包 @nkbt/geovis-standalone 使用教程

    前言 在地图应用程序开发中，开发者经常会遇到需要添加热点、图层和地图标记等功能的需求。如果没有依赖的库来实现这些功能，那么开发者需要自己编写代码来实现这些功能，这会浪费大量时间和精力。

    4 年前
  • npm 包 @nkt/stylefmt 使用教程

    最近，前端开发中越来越多的重视代码风格的统一性，因为这不仅能让代码更易于阅读和理解，还能提高团队协作效率。而 @nkt/stylefmt 就是一款可以帮助前端开发者自动化规范 CSS 代码风格的 np...

    4 年前
  • npm 包 @nlabs/arkhamjs-views-react 使用教程

    本文介绍如何使用 @nlabs/arkhamjs-views-react 这个 npm 包，它是一个 React 组件库，用于在 ArkhamJS 模式下渲染视图。

    4 年前
  • npm 包 @nlabs/react-native-maps 使用教程

    在 React Native 开发中，地图组件是很实用的功能。@nlabs/react-native-maps 就是一款 React Native 地图组件，提供了丰富的地图样式和交互功能，可以方便地...

    4 年前
  • npm 包 @mybbz/parallax 使用教程

    前言 在前端开发中，视差滚动效果是一个比较常见的设计效果，它也是设计师和开发者可以展现出自己的创意与技术实力的一种手段。视差滚动效果在近几年的 Web 设计中愈发普遍，如何实现一个高效、易用的视差滚动...

    4 年前
  • npm 包 @mycolorway/tao_form 使用教程

    前言 在前端开发中，表单是必不可少的一部分。然而，表单的开发过程中往往会遇到一些问题，比如表单验证、数据处理等等。而针对这些问题，npm 上有一个非常好用的表单组件库：@mycolorway/tao_...

    4 年前
  • npm 包 @nll/rxfetch 使用教程

    介绍 在前端中经常需要进行 http 请求操作，一般使用的是 fetch 函数。但是 fetch 函数有时候使用起来不是很灵活，因此需要一些更加高效、灵活的库来进行操作。

    4 年前
  • npm 包 @myfave/react-native-rest-client 使用教程

    介绍 @myfave/react-native-rest-client 是一款适用于 React Native 的 REST API 客户端，可以帮助我们更方便地使用和管理 REST API 接口。

    4 年前
  • npm 包 @myfave/react-native-android-wifi 使用教程

    React Native 是目前最流行的前端开发框架之一。其中 @myfave/react-native-android-wifi 针对 Android 平台提供了一组 API ，能够用于控制 And...

    4 年前

相关推荐

    暂无文章