ng-sinco-utilidades NPM 包使用教程

ng-sinco-utilidades 是一个 Angular JS 的 npm 包，其中包含了一组多功能的 ngx pipe 和 directives，为前端编程提供了便利和支持。

本文将详细介绍如何安装和使用 ng-sinco-utilidades 这个 npm 包，并提供一些示例代码来解释其功能的实现。

安装

ng-sinco-utilidades 是一个 npm 包，为了安装它，需要运行以下命令：

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

引入

在 Angular 应用程序中，您需要在 app.module.ts 文件中引入 ng-sinco-utilidades：

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

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

Pipes 和 Directives

在 ng-sinco-utilidades 中，有以下的 Pipes 和 Directives：

Pipes

SincoCurrency

用于将数字格式化为货币格式，并自动加上货币符号和千位分隔符。

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

SincoDecimal

将数字格式化为指定小数位数。

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

GlobalMessageDirective

用于显示全局的消息通知，通常用于在表单中显示表单验证错误等信息。

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

示例代码

以下示例演示了如何在 Angular 应用程序中使用 ng-sinco-utilidades。

在 HTML 模板文件中使用 Pipe

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

在 Component 类中使用 Pipe

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

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

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

在 HTML 模板文件中使用 Directive

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

在 Component 类中使用 Directive

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

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

结论

ng-sinco-utilidades 是一个强大的 Angular 的 npm 包，它为前端编程提供了便利和支持。在本文中，我们详细介绍了如何安装和使用它的 Pipes 和 Directives，并提供了一些示例代码来解释其功能的实现。希望这篇文章能够帮助您更好地了解和使用 ng-sinco-utilidades。

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

阅读全文

猜你喜欢

  • npm 包 lianui 使用教程

    lianui 是一个基于 Vue.js 的前端 UI 组件库，它提供了一系列常用的 UI 组件和可定制的主题。它的优点在于轻量、易用、易于定制和可扩展性强。其中，npm 包 lianui 提供了一种方...

    3 年前
  • npm 包 watch_reapp 使用教程

    如果你正在开发基于 React 的 Web 应用程序，并且希望在本地环境中进行快速迭代，并自动重载页面，那么你可以使用 npm 包 watch_reapp。 watch_reapp 可以监视你的 Re...

    3 年前
  • npm 包 slate-multicursor 使用教程

    在前端开发中，文本编辑器是一个不可或缺的工具，而其中最重要也最基础的操作之一就是多光标编辑。为了实现多光标编辑，我们通常需要使用一些辅助工具，其中 Slate.js 是一个非常优秀的选择，而 npm ...

    3 年前
  • npm 包 prember-beautify 使用教程

    在前端开发中，构建静态网站非常常见。而其中的一个步骤就是静态化渲染（prerendering）。prember-beautify 即是一款用于静态化渲染的 npm 包， 它能够帮助我们生成静态 HTM...

    3 年前
  • npm 包 gh-star-repos 使用教程

    在开发过程中，我们经常需要用到一些第三方库或依赖，而 npm 作为前端项目管理的工具，成为了开发者的首选。然而，在众多的 npm 包中，有些包能够极大地提高我们的开发效率和代码质量，而 gh-star...

    3 年前
  • npm 包 @morphatic/charts 使用教程

    @morphatic/charts 是一个基于 D3.js 开发的封装库，提供了一系列图表组件供前端开发者使用。本文将介绍如何安装和使用这个包，包括基本图表组件的使用方法和属性配置等。

    3 年前
  • npm 包 stylib 使用教程

    npm 包 stylib 使用教程 前端开发中，样式设计是一个非常重要的部分。为了能够快速、简单、灵活地实现样式的设计与布局，我们需要一些简单、易用、功能丰富的工具。

    3 年前
  • npm 包 cking-web-server 使用教程

    导语 在 web 开发中，使用本地服务器提供对网站的调试和测试十分重要。在 Node.js 环境下，可以使用 cking-web-server 这个 npm 包来搭建本地服务器，方便地对网站进行调试和...

    3 年前
  • npm 包 lch-currency-format 使用教程

    lch-currency-format 是一个可以帮助前端开发者将数字格式化为货币格式的 npm 包。在前端页面中，我们通常需要显示货币或者数字，lch-currency-format 可以帮助我们轻...

    3 年前
  • npm 包 workbox-build-v2-with-follow 使用教程

    前言 现如今，单页面应用（Single Page Application）已经成为前端开发的主流之一。然而，与此同时也给前端技术栈带来了一系列问题。其中，离线缓存支持是其中之一。

    3 年前
  • npm 包 rollup-plugin-typescript-path-mapping 使用教程

    简介 rollup-plugin-typescript-path-mapping是一款用于将 typescript 中使用的路径映射（Path Mapping）转为相对路径的 Rollup 插件。

    3 年前
  • npm 包 rollup-plugin-typescript-fix 使用教程

    随着 TypeScript 在前端开发中的普及，rollup 作为打包工具也在逐渐受到关注。而 rollup-plugin-typescript 是 rollup 打包 TypeScript 代码的必...

    3 年前
  • npm包 client-log-sdk 使用教程

    简介 在前端开发中，我们经常需要查看和调试前端代码运行的日志信息。而client-log-sdk是一款可以帮助我们在客户端轻松记录和管理日志信息的npm包。本篇文章将介绍client-log-sdk的...

    3 年前
  • npm 包 com-couleurcitron-photoviewer 使用教程

    概述 com-couleurcitron-photoviewer 是一个基于 React Native 的图片查看器组件，可以帮助前端开发人员在移动端应用中实现图片浏览功能并提供多种配置选项。

    3 年前
  • npm 包 screen-viewer 使用教程

    简介 在项目开发过程中，我们经常需要在不同的浏览器和设备上测试页面的展示效果。为了方便测试，我们可以使用 npm 包 screen-viewer 来模拟不同屏幕分辨率下的页面效果。

    3 年前
  • npm 包 remox 使用教程

    随着移动设备的普及，响应式设计成为了一种必备的技能。而 rem 单位正是响应式设计的基石。使用 rem 单位进行开发，可以让页面在不同设备上展现出相同的比例和视觉效果。

    3 年前
  • npm 包 angular-d3-word-cloud 使用教程

    在前端开发中，使用数据可视化工具可以更加生动地展现数据，而 D3.js 是一个比较受欢迎的数据可视化工具。而 angular-d3-word-cloud 是基于 D3.js 实现的用于展示词云的 An...

    3 年前
  • npm 包 bmsdave-text-mask-addons 使用教程

    随着前端技术的不断发展，我们经常需要使用一些第三方的库或框架，这些工具大大提高了我们的效率。 今天，我们来介绍一个非常有用的 npm 包，它是 bmsdave-text-mask-addons。

    3 年前
  • npm 包 angular5-svg-round-progressbar 使用教程

    介绍 angular5-svg-round-progressbar 是一个开源的 npm 包，它提供了一个可定制的圆形进度条组件，可以用于 Angular 5 及以上版本的前端开发中。

    3 年前
  • npm 包 homebridge-konkeplatform 使用教程

    前言 在智能家居设备的控制中，homebridge 平台已经成为了一个非常流行的工具，它可以让用家里的 iOS 设备轻松地与智能设备进行交互，而 homebridge-konkeplatform 就是...

    3 年前

相关推荐

    暂无文章