npm 包 ng-conversational 使用教程

什么是 ng-conversational？

ng-conversational 是一个 Angular 库，它提供了一种可定制的聊天机器人 UI 组件。它可以帮助开发人员快速构建聊天机器人应用，并且具有高度的可定制性，可以根据项目的需要进行配置与扩展。

如何安装 ng-conversational？

首先，您需要创建一个新的 Angular 项目。然后，您可以按照以下步骤来安装和使用 ng-conversational：

  1. 在终端中使用 npm 安装 ng-conversational：
--- ------- ----------------- ------
  1. 在 app.module.ts 中导入 ConversationalModule：
------ - -------------------- - ---- --------------------
---
-----------
  -------- -
    ---
    --------------------
  --
  ---
--
------ ----- --------- - -
  1. 在组件中使用 ConversationalComponent：
------ - --------- - ---- ----------------
------ - -------- ----- ------ - ---- --------------------
------------
  --------- -----------
  --------- -
    ------------------ ---------------------
                       ---------------
                       ---------------------------------------
                       -----------------------------
                       --------------------
    --------------------
  -
--
------ ----- ------------ -
  --------- --------- - -
    -
      ----- ------- --- --- ------
      ------- --- ----------- ------------------
      ------ -----
      ------- -----
      ----- --- --------------- - -------
    -
  --
  ---- - --- ------------ -------------------
  ------- - -----
  -------------------- -------- -
    -- ------
  -
  ------------------ -------- -
    -- ------
  -
-

如何使用 ng-conversational？

使用 ng-conversational 时，您需要指定以下参数：

  • messages：Message[] 类型的数组，用于显示聊天记录。
  • avatar：User 类型的对象，用于头像展示。
  • onSendMessage：函数，用于处理发送消息的逻辑。
  • onTyping：函数，用于处理让用户知道是否正在输入的逻辑。
  • talking：布尔类型的变量，用于指定是否可以输入。

使用 ng-conversational 的示例

以下是使用 ng-conversational 的示例代码：

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

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

在这个示例中，我们创建了一个简单的聊天机器人，通过与用户交互来提供信息。我们通过浏览器的控制台来检查输出，确保一切正常。

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

阅读全文

猜你喜欢

  • npm 包 @p4d/rpi 使用教程

    概述 @p4d/rpi 是一个基于树莓派的硬件操作接口库。如果你需要通过 Node.js 编写树莓派相关项目，那么这个库可以帮助你快速开发。它提供了许多树莓派的GPIO，PWM，SPI，I2C等接口的...

    3 年前
  • npm 包 @pluritech/pagination 使用教程

    介绍 在前端开发中，分页是一个常见需求。可以使用 @pluritech/pagination 这个 npm 包来方便地实现分页。 @pluritech/pagination 是一个轻量级、易用、不依赖...

    3 年前
  • npm 包 markdown-contributors 使用教程

    简介 markdown-contributors 是一个 npm 包，旨在为 Markdown 文件添加贡献者列表。它可以根据 Git 历史记录识别哪些人最近修改了文件，并生成一个包含这些人名和链接的...

    3 年前
  • npm 包 node_test_abds 使用教程

    在前端开发中，我们经常会使用 npm 包来提高开发效率。而在这里，我们将介绍一款名为 node_test_abds 的 npm 包的使用教程。 什么是 node_test_abds node_test...

    3 年前
  • npm 包 @dbmdz/mirador-keyboardnavigation 使用教程

    简介 在使用 Mirador 这一开源的多窗口展示软件时， @dbmdz/mirador-keyboardnavigation 是一个非常有用的 npm 包。它提供了一个简单的键盘导航方式来帮助用户方...

    3 年前
  • npm 包 link-rel-html-webpack-plugin 使用教程

    前言 对于前端开发人员而言，使用 webpack 进行项目构建是常见的做法之一。而在构建过程中，我们经常会使用各种 webpack 插件来增强项目的功能与性能，其中一个十分实用的插件就是 link-r...

    3 年前
  • npm 包 nodbsync 使用教程

    1. 前言 在前端开发中，我们经常会遇到需要操作数据库的情况，而nodbsync是一个备受推荐和广泛应用的npm包，可以帮助我们快速地对数据库进行操作。本文将介绍使用nodbsync的相关技术和步骤，...

    3 年前
  • npm 包 hello-ts-lib-starter 使用教程

    介绍 hello-ts-lib-starter 是一个开源的 TypeScript 库模板，提供了一套完整而简单的开发环境和打包方案，包括 TypeScript 的编译、代码规范的检查、单元测试、文档...

    3 年前
  • npm 包 @ui-kit/css 使用教程

    近年来，随着前端技术的不断发展和应用场景的不断扩大，前端 UI 库的重要性也越来越凸显出来。@ui-kit/css 就是其中一款非常优秀的前端 UI 库，不仅提供了丰富的 UI 组件，还通过优化 CS...

    3 年前
  • npm 包 @ui-kit/light 使用教程

    简介 在 web 应用的开发过程中，UI 组件是非常重要的一环。UI 组件是指可重用的用户界面元素，比如按钮、输入框、下拉框等。UI 组件库是封装了大量基础 UI 组件的库，通常用于提升开发效率和代码...

    3 年前
  • npm包ts-instagram-private-api使用教程

    在前端开发过程中，我们经常需要使用 Instagram API 来获取用户信息、发布帖子等操作，而ts-instagram-private-api是一个能够让我们方便地使用 Instagram API...

    3 年前
  • npm 包 @ui-kit/docs 使用教程

    近些年，Web 前端技术正在蓬勃发展，前端组件库极度丰富。如何选择一个好用的前端组件库显得尤为重要。@ui-kit/docs 是一款非常优秀的前端组件库文档生成工具，它可以快速构建文档网站和演示站点。

    3 年前
  • npm 包 w4 使用教程

    前言 w4 是一个常用的 npm 包，它提供了一些常见的前端工具函数，使用起来非常方便。在本文章中，我将会详细介绍如何使用 w4 包，并且会给出一些示例代码，帮助大家更好地学习和掌握这个技术。

    3 年前
  • npm 包 postcss-extract-animations 使用教程

    在前端开发中，动画效果的应用越来越重要。但是，过多的动画会影响网站的性能，使用 css3 的动画属性也容易出现代码冗余的问题。因此，需要一种更加高效和简洁的方式来实现动画效果。

    3 年前
  • npm 包 ng2-modalboxmessage 使用教程

    简介 ng2-modalboxmessage 是一个基于 Angular 2+ 的 npm 包，用于快速创建漂亮的模态框和消息框。它简单易用，支持自定义样式和动画效果，并在项目中广泛使用。

    3 年前
  • npm 包 redux-relax-saga 使用教程

    redux-relax-saga 是一个 React 应用中用于管理 redux 状态的工具。它使用 redux-saga 来处理异步操作，将状态管理的复杂性降到了最低限度。

    3 年前
  • npm 包 redux-relax-thunk 使用教程

    在现代的前端开发中，JavaScript 程序的复杂度越来越高，状态管理成为了许多开发者必不可少的工作。Redux 是一个非常流行的状态管理库，但是它的使用也有一定的门槛。

    3 年前
  • npm 包 @dasnoo/arsocket-server 使用教程

    什么是 @dasnoo/arsocket-server @dasnoo/arsocket-server 是一个基于 Node.js 的 WebSocket 服务器，它采用了 socket.io 库实现...

    3 年前
  • npm 包 botpress-wordhop 使用教程

    前言 在聊天机器人交互中，一些关键的功能需要使用第三方的工具来实现。npm 包 botpress-wordhop 是一款可以集成在 Botpress 中的聊天机器人。

    3 年前
  • npm 包 sass-less-material-colors 使用教程

    Sass 和 Less 是两种流行的 CSS 预处理器，而 Material Design 是 Google 推出的一套设计规范。sass-less-material-colors 是一个可以方便地在...

    3 年前

相关推荐

    暂无文章