简介
ngx-tour是一个用于开发网站导游的npm包。它基于Angular。通常我们需要一个解释器，引导用户浏览新功能，ngx-tour正好能做到这一点。俗称为“欢迎界面”。ngx-tour提供了一种以用户友好的方式优雅地展示新功能的方法，例如为新用户展示如何使用网站上的不同工具功能，以及如何找到他们使用所需的要素，同时了解一些可以提供时间的助手快捷键、面板、工具栏菜单等。
如何在网站上实现这样的导游呢？Ngx-tour正式应运而生。
在本教程中，我们将探讨如何使用Ngx-tour创建网站导游。
准备,
在使用ngx-tour之前，需要将项目文档准备好。你需要先安装好Angular CLI，以及熟悉了解Angular 9基础。
然后我们开始。
1. 安装
我们可以使用以下命令来安装ngx-tour:
npm install ngx-tour npm install @ngx-tour/ngx-popper
如果我们想要用ngx-template作为特定的界面，那么我们就需要安装一个额外的包:
npm install @ngx-tour/core npm install @ngx-tour/md-menu npm install @ngx-tour/ngx-bootstrap
以上几个命令行对于安装好ngx-tour是很重要的。
2. 基本语法
在使用ngx-tour之前，我们首先需要了解它的基本语法。一般情况下，导游是按照步骤展示的。每个导游步骤都有一个标题和一些列需要介绍的文字，顶部一般会有一个小箭头将目标点指出来。下面是一个示例代码：
<tour-step title="Step Title" content="Step Content" [preventScroll]="true" [attachTo]="target" placement="bottom"></tour-step>
上面这个ngx-tour模板是个典型的TourStep，它含有几个不同的属性，它们分别是：
- title：该步骤的标题。
- content：该步骤的内容。
- preventScroll：控制是否允许页面滚动。
- attachTo：指导箭头、提示框出现的目标点，这个target在脚本中编写。
- placement：箭头出现的位置，例如top、bottom、left、right等。
3. 模块导入
在遵循了以上基本语法之后，接下来要做的是在应用程序中导入ngx-tour模块。输入如下代码：
import {TourModule} from 'ngx-tour-core';
@NgModule({
imports: [ ... TourModule.forRoot()]
})为了避免潜在的冲突问题，我们需要明确的导入和使用ngx-tour。通过这样的方式，ngx-tour的组件和指令就可以在你的应用程序中使用了。
4. 创建页面
好了，现在我们来开始创建页面吧。下面是一个例子。
-- -------------------- ---- -------
------ ----------- ------- ---------- ----------- ---- ----------------
------ ------------- --------- ---- ----------------
------------
--------- -------------------
------------ --------------------------------
---------- ---------------------------------
--
------ ----- -------------------- ---------- ------ -
------------------------ ------ ----------- -------------
------------------- ----- ------------ --
------ ---------- - -
-
--------- -----------
-------- ----- -- ---- ------------ --- -----------
---------- --------
------ -------- -- --- ---------
-
--
------------
------------------
-
---------
----------------
-
-以上是简单的typescript代码。
如果你使用了 @ViewChild 特性，你需要在你的 HTML 中绑定 ViewChild 引用：
<div #myDiv> ... </div>
现在我们可以在 my-component.component.html 文件中使用如下 ngx-tour 组件：
<tour-step *ngFor="let step of steps" [step]="step"></tour-step> <button (click)="startTour()">Start Tour</button> <button (click)="endTour()">End Tour</button>
接着需要注意：这个 startTour() 方法在这里只是示例，看到这个按钮的时候，如果点击之后，导游将启动。
接下来我们再回到刚刚的typescript中，waitFor的字段需要将成员变量的类型设置为Promise<tourstep>。设置 waitFor 等待已加载的组件。例如，如果你的组件是一个懒加载模块，就可以在这里设置waitFor。
这部分主要在启用模板注入模式下对TourService进行初始化。
-- -------------------- ---- -------
------ ----------- ------- ----------- ---------- ---- ----------------
------ - ------------ --------- - ---- ----------------
------------
--------- ---------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
------------------- ------- -----------
------ ---------- ---------- - -
-
--------- --------
-------- ----- -- ---- ---- ------- ------- -------
---------- --------
------ -------- --------
------ --- -- -----------------------------
-------------- ----
--
-
--------- --------
-------- ----- -- --- ---- ------- --- -- ----- ---------- ---- -----
------ --- -- ----------
------ ------ ----------
-------------- -----
--------- - -- ------------------------------------------------------
-------- -----------
-
-
--
------ ---------- ----------
------------------- ------------ ------------ - -
------ --------- -
-----------------------
-
------ ----------- -
-------------------------
-
------ ----------- ---- -
-- -------------------- --------------------------------
-- ---------------------------------------------------------------
------------------------------------------- -
------ ---
--------------- -
--------- --------
--------- - -------- ----------- --
------- ----- ------
----- -----
--
------------------ -
-------- -----
------------ -----
-------------- -----
------------- -----
--------- --------
-
---
-------------- - -----------------------------
-
-最后附上my-component.component.html页面的模板：
<div #myDiv>... </div> <tour-step *ngFor="let step of tourSteps;" [step]="step"></tour-step> <button class="btn btn-primary" (click)="startTour()">Start Tour</button> <button class="btn btn-secondary" (click)="endTour()">End Tour</button>
好了，以上是写入的关键代码部分，你的ngx-tour工具箱可以愉快地开发啦。
5. 总结
到此，我们学了Ngx-tour的基本操作，更多高级的用法，你可以自行查看文档。
Ngx-tour是非常优秀的开源应用程序，它可以快速地帮助开发人员用最少的代码在网站上创建一个实时导游程序。
作者：吴雪 出处：CSDN 链接：https://blog.csdn.net/lgbzy1022/article/details/91288813 来源：CSDN 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662d81e8991b448e20ab