介绍
ng2-tour-fix 是一个 Angular 的轻量级导览解决方案，可以通过简单的配置实现逐步引导用户浏览应用的功能。它支持多语言，可以自定义样式和多种事件触发方式，可以帮助前端开发者快速构建交互友好的应用。
安装
npm install ng2-tour-fix --save
使用
- 在项目的 AppModule 中导入 TourModule。
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
-----------
-------- -
--------------------
--
-- ---
--
------ ----- --------- - -- 在组件的模板中添加 tourAnchor 指令，指定需要展示导览的元素。
<button tourAnchor="myButton">点击这里开始</button> <div tourAnchor="myDiv"> <h1>这是一个展示区域</h1> <p>欢迎来到我的应用。</p> </div>
- 在组件类中定义导览步骤，并通过 tourService 呈现出来。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
------------
-- ---
--
------ ----- ----------- ---------- ------ -
------------------- ------------ ------------ --
---------- -
-----------------------------
-
--------- -----------
-------- ---------
---------- ---------
------ -------
--
-
--------- --------
-------- -----------
---------- --------
------ -----------
--
---
-------------------------
-
-- 可以设置全局配置，例如以下配置会将箭头样式更改为圆角。
{
arrowStyle: {
borderRadius: '5px',
opacity: 0.8
}
}指令
tourAnchor
用法：<div tourAnchor="myAnchor"></div>
说明：在 Angular 组件中添加 tourAnchor 指令，可指定需要展示导览的元素。tourAnchor 的属性值即为锚点的 ID，需要和导览步骤中的 anchorId 保持一致。
tourStepTemplate
用法：<ng-template let-step="step" tourStepTemplate></ng-template>
说明：在 Angular 组件中添加 tourStepTemplate 指令，可自定义导览步骤的模板。在模板中，可以通过 let-step="step" 来获取当前导览步骤的信息，在模板中显示需要的内容。
服务
TourService
说明：提供操作导览的方法，例如初始化、开始、结束导览等。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
------------
-- ---
--
------ ----- ----------- ---------- ------ -
------------------- ------------ ------------ --
---------- -
---------------------------------------
-------------------------
-----------------------
-
-TourStateService
说明：提供获取导览状态的方法。例如，可以通过 isTourActive 判断导览是否正在进行中。
-- -------------------- ---- -------
------ - ---------------- - ---- ---------------
------------
-- ---
--
------ ----- ----------- ---------- ------ -
------------------- ----------------- ----------------- --
---------- -
--------------------------------------------------
-
-示例代码
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- ---------------
------------
--------- -----------
--------- -
-----------------
-- ----------------------------------
------- -----------------------------------
-
--
------ ----- ------------ ---------- ------ -
------------------- ------------ ------------ -
-
----------- ---- -
-
------------ ---- -
-----------------------------
-
--------- -----------
-------- -----------
---------- ---------
------ -------
-
---
-------------------------
-
-总结
ng2-tour-fix 是一个方便易用的导览解决方案，可以帮助前端开发者实现应用的逐步引导功能。如果您希望构建交互友好的应用，现在就去试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556f781e8991b448d3dcc