npm 包 angular2-toaster-mod 使用教程

简介

在使用 Angular2 开发时，经常需要在前端页面上弹出提示信息，而 angular2-toaster-mod 就是可靠的一个 Angular2 提示框组件，可以轻松实现丰富的提示样式、位置自定义以及自定义操作等功能。

安装

首先需要通过 npm 进行安装，执行以下命令：

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

基本使用

在使用前需要在 app.module.ts 中导入组件：

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

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

在组件中使用示例：

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

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

配置

通过 ToasterConfig 类配置提示框，可以设置位置、持续时间、类型、颜色、上/下边距等参数：

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

然后在组件中注入 ToasterConfig，并使用它来配置提示框组件：

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

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

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

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

在 HTML 中使用：

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

自定义组件

除了默认的提示框样式，您也可以使用自定义组件来替换默认的提示框样式，示例代码如下：

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

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

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

在组件中使用：

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

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

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

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

总结

通过使用 angular2-toaster-mod 可以方便地实现各种类型、样式、位置的提示框功能，并且还可以自定义组件实现更加灵活和复杂的提示框需求。当然，在实际使用中我们还需要针对具体的业务场景和需求进行使用和配置。

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

阅读全文

猜你喜欢

  • npm 包 cgs 使用教程

    什么是 cgs？ cgs 全称为 Canvas Graphics System，是一个基于 Canvas 的图形绘制库。cgs 可以帮助开发者快速地绘制各种图形，如文本、线段、矩形、圆形、多边形等。

    2 年前
  • npm 包 total.js22 使用教程

    什么是 total.js22 Total.js22 是一款前端框架，它集成了一系列的前端开发工具，如模版引擎、路由、表单验证等等。使用 total.js22 可以提高前端开发效率，减少开发成本。

    2 年前
  • npm 包 jclass.js 使用教程

    简介 jclass.js 是一个用于操作 HTML 元素 CSS 类的 JavaScript 工具库，它可以轻松地为元素添加、删除、切换 CSS 类。它的特点是轻量级、易于使用、强大的功能，可以很方便...

    2 年前
  • npm 包 oh-lodash 使用教程

    前言 在前端开发中，经常需要对数组和对象进行操作，而 JavaScript 提供的原生操作并不够便捷和高效。因此，第三方库成为了前端开发的必备品。其中，lodash 库是众多库中最为流行的之一。

    2 年前
  • npm包——smeargle的使用教程

    在前端开发中，经常需要用到封装好的 npm 包来完成各种工作，而 npm 包——smeargle就是一种非常实用的工具，它可以在前端项目中轻松地进行图片压缩和缩放操作，让我们的前端开发效率大大提升。

    2 年前
  • npm 包bootjs-common使用教程

    前言 在Web前端开发中，我们经常会使用各种工具和框架来协助我们的开发工作，其中npm包是最为常用的一种工具。npm包是一组预定义的JavaScript代码，可以被引入到项目中以实现一些功能。

    2 年前
  • npm 包 react-grid-system-lite 使用教程

    在前端开发中，使用栅格系统是一个非常普遍的需求。React 社区中有很多相关的成熟库，如 react-grid-system、react-bootstrap 等等。

    2 年前
  • 使用 winston-koa2-logger 记录 Koa2 应用日志

    简介 winston-koa2-logger 是一个基于 winston 的 Node.js 应用日志记录器，特别适用于 Koa2 框架。使用它可以轻松记录 Koa2 应用程序中的所有日志功能，例如请...

    2 年前
  • npm 包 phaser-teletype 使用教程

    什么是 phaser-teletype phaser-teletype 是一个基于 Phaser 3 游戏引擎的 npm 包。它能够在游戏中模拟打字机的效果，让你的文字在屏幕上逐字逐句地显示。

    2 年前
  • npm 包 standard-focus 使用教程

    介绍 standard-focus 是一个用于检测前端网页中的用户焦点流的 npm 包。在前端开发中，用户的操作流程和交互体验是非常重要的。通过使用 standard-focus 这个工具，可以让开发...

    2 年前
  • NPM 包 adf-widget-clock 使用教程

    介绍 adf-widget-clock 是一个简单易用的 JavaScript 插件，用于在网页中创建时钟可视化小部件。该插件通过 NPM 包管理器进行管理和发布。

    2 年前
  • npm 包 adf-widget-github 使用教程

    前言 在我们开发项目的过程中，总会遇到一些需要使用到外部第三方库的情况。由于现代化的前端技术生态不断发展，前端工具库也是愈加丰富，这里要为大家介绍的就是一款 npm 包 adf-widget-gith...

    2 年前
  • npm 包 get-bazooka 使用教程

    NPM 是 Node.js 的软件包管理器，它允许开发人员从一个包的存储库下载并安装依赖项。get-bazooka 是一个优秀的 npm 包，可以帮助前端开发人员实现更快、更容易的开发流程。

    2 年前
  • npm 包 stas-immutable 使用教程

    简介 在这篇文章中，我们将介绍如何使用 npm 包 stas-immutable 来创建不可变的 JavaScript 对象和数组。 不可变对象可以避免在应用程序中出现意外的突变，从而降低与状态管理相...

    2 年前
  • npm 包 materialized.autocomplete 使用教程

    简介 materialized.autocomplete 是一款基于 Materialize UI 库的 jQuery 插件，用于实现输入框的自动补全功能。该插件已经发布到了 npm 上，可以通过 n...

    2 年前
  • npm 包 nm-dbus-native 使用教程

    介绍 nm-dbus-native 是一个 Node.js 的 npm 包，它提供了使用 D-Bus 协议与 NetworkManager 进行通信的功能。该模块封装了 nm-dbus 的逻辑，提供了...

    2 年前
  • npm 包 react-doc-generator 使用教程

    简介 在前端开发中，文档的编写和维护是非常重要的，特别是对于组件库的开发和使用。在这方面，react-doc-generator 是一款非常实用的 npm 包，它可以帮助我们自动生成组件的文档。

    2 年前
  • npm 包 s- 使用教程

    在前端开发中，npm 是一个必不可少的工具，其中包含着数以万计的开源代码包。这些包可用于提高项目的开发和生产效率。其中一个非常有用的 npm 包是 s-，它可以帮助我们轻松实现响应式开发。

    2 年前
  • npm 包 react-body-images 使用教程

    前言 在前端开发过程中，有时候需要在页面中展示一些背景图或者图片，但是如果图片尺寸过大，可能会影响网页性能和用户体验。为了解决这个问题，我们可以借助一个 npm 包—— react-body-imag...

    2 年前
  • npm 包 infinite-file-stream 使用教程

    什么是 infinite-file-stream infinite-file-stream 是一个能够生成无限大小的文件流的 npm 包。他通过使用 Node.js 的可写流和可读流，能在不占用太多内...

    2 年前

相关推荐

    暂无文章