Ngx-tour：使用教程

简介

ngx-tour是一个用于开发网站导游的npm包。它基于Angular。通常我们需要一个解释器，引导用户浏览新功能，ngx-tour正好能做到这一点。俗称为“欢迎界面”。ngx-tour提供了一种以用户友好的方式优雅地展示新功能的方法，例如为新用户展示如何使用网站上的不同工具功能，以及如何找到他们使用所需的要素，同时了解一些可以提供时间的助手快捷键、面板、工具栏菜单等。

如何在网站上实现这样的导游呢？Ngx-tour正式应运而生。

在本教程中，我们将探讨如何使用Ngx-tour创建网站导游。

准备,

在使用ngx-tour之前，需要将项目文档准备好。你需要先安装好Angular CLI，以及熟悉了解Angular 9基础。

然后我们开始。

1. 安装

我们可以使用以下命令来安装ngx-tour:

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

如果我们想要用ngx-template作为特定的界面，那么我们就需要安装一个额外的包:

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

以上几个命令行对于安装好ngx-tour是很重要的。

2. 基本语法

在使用ngx-tour之前，我们首先需要了解它的基本语法。一般情况下，导游是按照步骤展示的。每个导游步骤都有一个标题和一些列需要介绍的文字，顶部一般会有一个小箭头将目标点指出来。下面是一个示例代码：

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

上面这个ngx-tour模板是个典型的TourStep，它含有几个不同的属性，它们分别是：

  • title：该步骤的标题。
  • content：该步骤的内容。
  • preventScroll：控制是否允许页面滚动。
  • attachTo：指导箭头、提示框出现的目标点，这个target在脚本中编写。
  • placement：箭头出现的位置，例如top、bottom、left、right等。

3. 模块导入

在遵循了以上基本语法之后，接下来要做的是在应用程序中导入ngx-tour模块。输入如下代码：

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

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

为了避免潜在的冲突问题，我们需要明确的导入和使用ngx-tour。通过这样的方式，ngx-tour的组件和指令就可以在你的应用程序中使用了。

4. 创建页面

好了，现在我们来开始创建页面吧。下面是一个例子。

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

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

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

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

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

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

以上是简单的typescript代码。

如果你使用了 @ViewChild 特性，你需要在你的 HTML 中绑定 ViewChild 引用：

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

现在我们可以在 my-component.component.html 文件中使用如下 ngx-tour 组件：

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

接着需要注意：这个 startTour() 方法在这里只是示例，看到这个按钮的时候，如果点击之后，导游将启动。

接下来我们再回到刚刚的typescript中，waitFor的字段需要将成员变量的类型设置为Promise。设置 waitFor 等待已加载的组件。例如，如果你的组件是一个懒加载模块，就可以在这里设置waitFor。

这部分主要在启用模板注入模式下对TourService进行初始化。

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

最后附上my-component.component.html页面的模板：

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

好了，以上是写入的关键代码部分，你的ngx-tour工具箱可以愉快地开发啦。

5. 总结

到此，我们学了Ngx-tour的基本操作，更多高级的用法，你可以自行查看文档。

Ngx-tour是非常优秀的开源应用程序，它可以快速地帮助开发人员用最少的代码在网站上创建一个实时导游程序。

作者：吴雪 出处：CSDN 链接：https://blog.csdn.net/lgbzy1022/article/details/91288813 来源：CSDN 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

阅读全文

猜你喜欢

  • npm 包 draftlog-session 使用教程

    前言 在日常的前端开发中，我们往往需要在控制台输出一些信息，比如调试信息、性能监测等等。然而，如果输出的内容量较大，会导致控制台信息过于混乱，不便于阅读和理解。因此，我们需要一个更好的控制台输出方式，...

    3 年前
  • npm 包 ecc-tools-dev 使用教程

    简介 ecc-tools-dev 是一个基于 Node.js 的 npm 包，用于前端开发过程中对椭圆曲线加密算法进行开发和测试。ecc-tools-dev 支持多种加密算法，包括 ECDSA 和 E...

    3 年前
  • npm 包 everton 使用教程

    简介 Everton 是一个流行的npm包，用于在前端项目中管理状态，它提供了一种简单的方式来管理应用中的数据，并支持集成React，Redux和ReactiveX等流行的库。

    3 年前
  • npm包 `exit-on-double-back`使用教程

    在前端开发中，我们常常会需要处理用户按下返回键时的操作。而在一些场景下，我们需要将连续按两次返回键作为退出应用的触发条件。为了满足这个需求，开发者 @josephluck 开发了一个名为 exit-o...

    3 年前
  • npm 包 icann-fee-tlds 使用教程

    简介 icann-fee-tlds 是一个基于 Node.js 平台的 npm 包，它能够提供 ICANN 所规定的付费顶级域名列表。在今天的互联网生态中，对于开发者和网络安全从业者来说，掌握这个付费...

    3 年前
  • npm 包 interval-polynomial 使用教程

    介绍 interval-polynomial 是一个针对区间多项式进行计算的 npm 包。它支持基本的运算，包括加、减、乘和除，以及求根、求导、求二阶导数和积分等算法。

    3 年前
  • npm 包 next-react-router 使用教程

    前言 Next.js 是一个基于 React 的服务端渲染工具，已经成为了 React 服务端渲染的事实标准。对于一个现代化的应用程序，页面路由是必不可少的功能。React 路由解决方案中，React...

    3 年前
  • npm 包 magicsoftware 使用教程

    在前端开发中，我们常常需要使用各种各样的库和工具来协助我们完成开发任务，npm 是一个非常常用的包管理器，它可以帮助我们轻松地安装和管理各种依赖包。本文将介绍一个名为 magicsoftware 的 ...

    3 年前
  • npm 包 strip-invalid-trailing-encoding 使用教程

    在前端开发中，我们经常会遇到字符编码的问题。在发送 HTTP 请求或者解析响应数据的过程中，有时候会出现一些不合法的字符编码，这就需要我们对这些数据进行过滤和修正。

    3 年前
  • 使用 Gitbook-plugin-fsui

    Gitbook-plugin-fsui 是一款针对 Gitbook 网站开发的 npm 包，它能够为站点添加美观的 UI 元素和组件。本篇文章将提供使用该插件的详细教程，帮助前端开发者深入了解它的使用...

    3 年前
  • npm 包 @creativefew/ngx-expandable 使用教程

    前言 @creativefew/ngx-expandable 是一个 Angular 指令库，用于实现可伸缩的容器组件，方便展现隐藏的内容。该库易于使用，减少了前端开发的工作量，本篇文章将介绍其使用方...

    3 年前
  • npm 包 lorem-kaamelottsum 使用教程

    简介 npm 是 Node.js 的包管理器，用于安装、发布、共享 Node.js 项目的包或模块。而 lorem-kaamelottsum 则是一个基于 Node.js 的 npm 包，用于生成随机...

    3 年前
  • npm 包 node-replace 使用教程

    简介 npm 包 node-replace 是一款专门用于在 node.js 环境下替换文本的工具，能够方便地实现对文本中某些字符串进行替换操作，并支持正则表达式匹配。

    3 年前
  • npm 包 vue-breathing-colors 使用教程

    Vue-breathing-colors 是一个基于 Vue.js 的 npm 包，可以实现呼吸灯效果，非常适合用于网页页面上交互效果增强。在本篇文章中，我们将详细介绍该 npm 包的使用方法，并提供...

    3 年前
  • npm 包 everton2 使用教程

    前言 everton2 是一款便捷的前端开发工具，它为我们提供了许多实用的功能，例如自动生成样式、快速生成组件等。在使用时只需要通过 npm 安装即可。 如果你还不了解 npm，建议先阅读一下 npm...

    3 年前
  • npm 包 node-red-contrib-http-request-ucg 使用教程

    简介 node-red-contrib-http-request-ucg是一个基于Node.js的Web框架——Node-RED的插件，可以实现在Node-RED流程中发送HTTP请求，获取响应并进行...

    3 年前
  • npm 包 console-expect 使用教程

    简介 console-expect 是一个用于前端项目测试的 npm 包，它可以帮助我们验证代码中输出到控制台的信息是否符合预期。 在开发过程中，我们经常需要在控制台输出一些调试信息。

    3 年前
  • npm 包 groupcenter-dropdown-base-frontend 使用教程

    简介 在前端开发中，我们常常需要使用下拉菜单组件来进行页面的交互。npm 包 groupcenter-dropdown-base-frontend 是一个常用的前端组件库，其中包含许多常用的下拉菜单组...

    3 年前
  • npm 包 robotois-button 使用教程

    概述 robotois-button 是一个基于 React 的 npm 包，它提供了一个定制的按钮组件，可视化效果时尚简洁，功能也很简单，仅需要很少的配置即可使用。

    3 年前
  • npm 包 robotois-motion-sensor 使用教程

    介绍 开发前端项目时，经常需要使用一些 JavaScript 库和框架来实现特定的功能。npm 是目前最受欢迎的 JavaScript 包管理器之一，可以让我们轻松地安装和管理各种 JavaScrip...

    3 年前

相关推荐

    暂无文章