ng4-tour 是一个基于 Angular4 框架的引导库，可以帮助你创建有引导的应用程序。您可以轻松地创建一系列引导，并在您的应用程序中使用它们。这是一个非常实用的库，可以帮助您的用户更好地了解您的应用程序，并使他们更容易上手。
在本文中，我将讲解如何使用 ng4-tour 库并提供示例代码以供参考。
安装
使用 npm 包管理器来安装 ng4-tour，命令如下：
npm install --save ng4-tour
引入模块
引入 ng4-tour 模块到您的应用程序模块中：
-- -------------------- ---- -------
------ - ------------- - ---- -----------
-----------
-------- -
-----------------------
--
---
--
------ ----- --------- - -使用引导
在组件上使用 ng4-tour，需要加入 tourAnchor 指令和 tourStep 指令，表示当前步骤所在的 DOM 元素和这一步骤的描述，在组件中添加：
<div tourAnchor="anchor1"></div> <div tourAnchor="anchor2"></div> <div tourAnchor="anchor3"></div>
在组件的 ts 文件中添加：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
------------
---
--
------ ----- ----------- -
------------------- ------------ --------------- --
----------- -
-------------------------
-
-配置引导
在组件基础上，我们还可以通过 tourService 的其他方法对引导进行配置。以下是一些可用的选项：
setTitle(title: string)- 设置弹窗标题setOrientation(orientation: string)- 设置弹窗位置，有 top/bottom/left/right 四个选项setPrevNextBtn(option: boolean)- 显示/隐藏前进和后退按钮setBackdropColor(color: string)- 设置背景颜色setBackdropPadding(padding: number)- 设置弹窗与边界的距离setBorderRadius(radius: number)- 设置弹窗的圆角
示例：
-- -------------------- ---- -------
------ - --------------- ----------- - ---- -----------
------------
---
--
------ ----- ----------- -
------------------- ------------ --------------- --
----------- -
----------------
--------------- ----------
-----------------------------------
---------------------
-------------------------
----------------------
-------------------
---------
-
-关闭引导
使用 close() 方法关闭引导：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
------------
---
--
------ ----- ----------- -
------------------- ------------ --------------- --
----------- -
-------------------------
-
-现在你已经知道如何使用 ng4-tour，它可以帮助你创建非常好的引导。使用此库可以为您的应用程序提供出色的用户体验，使其更易于上手。
示例代码：ng4-tour-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da1d9