在前端开发中，经常需要为用户提供引导式教程来演示界面的功能和操作流程。在 Angular 2+ 的开发中，有一个 npm 包叫做 bm-ng2-tour，它为我们提供了一个可以自定义样式、内容和组件的引导式教程组件。
本文将介绍如何使用 bm-ng2-tour 包来为 Angular 应用创建引导式教程，包括基本的用法和一些高级特性。
安装和配置 bm-ng2-tour
首先，我们需要在我们的 Angular 2+ 项目中安装 bm-ng2-tour。使用以下命令可以安装它：
npm install bm-ng2-tour --save
然后，我们需要将 bm-ng2-tour 的模块引入到我们的 Angular 2+ 的模块中。在 app.module.ts 中添加以下代码：
-- -------------------- ---- -------
------ - --------------- - ---- --------------
-----------
-------- -
--------------
------------
--------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -使用 forRoot() 方法可以为服务提供一个全局唯一的实例。我们还需要在样式表中添加以下 CSS，以便在引导式教程中使用这些样式：
-- -------------------- ---- ------- -- ----------- ------- --------------------- - ---------- ------ -------------- ----- - -- -------- --- --- -------- --------------------- - ----------- ----- -------------- ----- - ----------------- - --------- --------- ------- ----- ------ ----- -------------- ---- ----------------- ------ - --------------------- -------------------------- - --------- --------- ------- ----- ------ --- -------------- ---- ----------------- ------ - ------------------------ - ------ ------ ------------- ----- -
基本用法
现在我们已经完成了 bm-ng2-tour 的基本配置，接下来，让我们看一下如何使用它创建引导式教程。以下是一个简单的使用示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ -------- - ---- --------------
------------
--------- -----------
--------- -
------- --------------------------- -------------
------- ----------------------- -------------
---- -----------
--------- ---------
------- -- --- ----- ---------
------
---- ------------
---------- ---------
------- ------------------------------------- -- ----- -------------
------- -- --- ------ ---------
------
---- -----------
--------- ---------
------- ------------------------------- --------------------- - ------ - -------- -----------
------- -- --- ----- ---------
------
-
--
------ ----- ------------ -
------- ----------- ---------- - -
-
------ ------ ------
--------- ---------
-------- ----- -- --- ----- -------
------------ -------
--
-
------ ------- ------
--------- ----------
-------- ----- -- --- ------ -------
------------ -------
------------ -------
--
-
------ ------ ------
--------- ---------
-------- ----- -- --- ----- -------
------------ -------
------------ ---------
-
--
------------------- ------------ ------------ --
------------ ---- -
---------------------------------------------
-------------------------
-
---------- ---- -
-----------------------
-
-我们首先导入了所有需要的包和服务，然后在组件中创建了一个页面布局，其中包含三个不同的元素。在组件类中，我们创建了一个名为 tourConfig 的数组，它是一个包含引导式教程步骤的配置数组。
然后，我们使用 TourService 的实例在 startTour() 方法中初始化了教程，并在点击“Start Tour”按钮时启动了它。当用户点击“End Tour”按钮时，该教程将结束。
在 tourConfig 数组中的每一个对象都代表了一个教程步骤。在这些对象中，我们可以定义标题、选择器、内容和按钮文本等属性。具体来讲，我们可以使用以下属性：
title: 步骤标题selector: 元素选择器，指示该步骤对应的 DOM 元素content: 此步骤的内容nextBtnText: 下一个按钮的文本prevBtnText: 上一个按钮的文本endBtnText: 结束按钮的文本placement: 弹出框显示的位置
我们可以在 tourConfig 数组中提供多个步骤，bm-ng2-tour 将自动切换到下一个步骤，并显示引导式教程的进度条。
bm-ng2-tour 还为我们提供了其他一些有用的 API，例如当前步骤、前一个步骤和后一个步骤、判断教程是否还有下一个步骤等。这些方法和属性使得我们可以很容易地根据当前步骤来自定义步骤的表现和行为。
高级特性
除了基本用法之外，bm-ng2-tour 还提供了一些高级特性，例如：
自定义模板
bm-ng2-tour 允许我们使用自定义模板来自定义引导式教程的外观和功能。我们可以通过修改模板文件中的 HTML 结构来实现自定义。以下是一个自定义模板的示例：
-- -------------------- ---- -------
-----------------------
---- ---------------------
---- ----------------------------- ---------- --------
---- ------------------------------- ------------ --------
------- ---------------------------
----------------------------
-------------------------------- ---------------- -----------
------- ---------------------------
---------------------------
--------------------------------- --------------- -----------
------
------------------------此模板使用 CSS 类来设计教程面板，并自定义按钮的外观和行为。
对于这种自定义模板，我们需要将 bm-ng2-tour 的样式文件设为“scope（局部样式）”，这样才能顺利地应用我们自己的样式。这一点可以通过在父级组件或父级样式表中添加以下 CSS 代码来实现：
.my-tour-step /deep/ .bm-tour-instructions,
.my-tour-step /deep/ .bm-tour-progress-bar {
all: initial;
}该代码将应用级别 CSS 的优先级设为低于当前选定元素中使用的样式，使我们可以轻松地自定义样式。
扫描所有 DOM 元素
默认情况下，bm-ng2-tour 只扫描与选择器匹配的第一个 DOM 元素，如果需要扫描和显示多个元素，我们需要设置 multiStep 属性为 true，如下所示：
-- -------------------- ---- -------
------- ----------- ---------- - -
-
------ ------ ------
--------- --------------
-------- ----- -- --- ----- -------
------------ -------
---------- -----
--
--这将在一次引导式教程中显示与选择器匹配的所有元素。
在组件中使用
而不是在模板中使用样式和模板传送门，我们还可以在组件代码中直接使用教程模块。以下是一个在组件中使用 bm-ng2-tour 的示例：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ------------ -------- - ---- --------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
--------------------- - ------- ----- -- -------- ----
--------------------- - ------- ----- -- -------- ----
------- ----------- ---------- - -
-
------ ------ ------
--------- ---------------------------
-------- ----- -- --- ----- -------
------------ -------
--
-
------ ------- ------
--------- ---------------------------
-------- ----- -- --- ------ -------
------------ -------
----------- ---------
--
--
------------------- ------------ ------------ --
----------- ---- -
---------------------------------------------
-
-在这个示例中，我们可以在组件中使用 ViewChild 装饰器来获取步骤元素，并将其添加到数组中作为 tourConfig 对象的选择器属性。然后，我们使用 ngOnInit() 方法中的 TourService 实例来初始化引导式教程。
总结
在本文中，我们介绍了如何使用 bm-ng2-tour npm 包来为 Angular 应用创建引导式教程。我们展示了基本用法和一些高级特性，例如自定义模板、扫描所有 DOM 元素和在组件中使用，以及其他有用的 API 方法和属性。
引导式教程可以在用户学会和了解应用程序的工作原理的同时帮助他们更快地上手。使用 bm-ng2-tour，我们可以轻松地为 Angular 2+ 应用中的某些特定元素制作漂亮的引导式教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb7f