1、intro.js
2、Bootstrap Tour
3、Bootstro.js
4、aSimpleTour
5、Joyride
如果在angular 中也使用上述jquery的插件当然也是可以的，但会产生以下几个问题：
1、要引入jquery库，这就增加的代码量，而且用到的部分并不多，导致代码冗余。
2、因为是基于jquery 的所以对dom的操作较为频繁，性能上也会产生影响。
3、对angular组件化、模块化方式操作不友好，使用较为繁琐。
这时，我们需要一种基于angular的界面向导库，方便的自定义我们的界面引导。
在npm中搜索到了一些不错的基于angular的界面引导库：
ngx-joyride
ngx-guided-tour
angular-shepherd
angular-custom-tour
telemachy
ngy-tutorial
ngx-tour-wizard
在一番浏览下来，发现ngx-joyride功能较多，界面美观，满足界面向导的日常功能。
在实际项目应用之后，发现非常好用简单、非常满意，但是也存在使用教程缺失的问题。
故写此篇文章详细介绍ngx-joyride的使用
ngx-joyride传送门
npm
github
插件终究是插件，
不像各种框架和库一样有那么多人维护和社区，
遇到问题可以搜索提问。
对于插件来说最好的文档及教程就是md文档，
若是md文档教程不够详细，
则新手使用起来将非常痛苦。
在我看完ngx-joyride插件上的demo 后。
发现md文档中讲解并不详细，
只说明了在某个组件中去使用，
并没有说怎么在不同组件不同路由中联合使用。
而代码中却找不到该demo源码，
而对于拿来主义来说，没有demo就不可以直观的看出代码的使用流程。
结合md文档和自己的使用过程，
记录下ngx-joyride的使用流程，
其中的参数配置不会详细说明，这个md文档倒是说的很清楚。
使用教程1、适用范围
angular(2~7)
2、安装
yarn add ngx-joyride
或者
npm install ngx-joyride --save
3、根模块中
import { JoyrideModule } from 'ngx-joyride';
@NgModule({imports: [JoyrideModule.forRoot()]})
如果只是在某个组件中使用的话，
也可以在该组件的模块中直接使用，根模块可不用。
4、子模块
需要加入引导组件的模块中
import { JoyrideModule } from 'ngx-joyride';
@NgModule({imports: [JoyrideModule.forChild()]})
如果页面中很多组件都有使用，
完全可以在共享模块中加入，
其它模块引入共享模块。
5、组件中
在任意组件中，当然一般选择在布局组件或者触发引导界面事件的组件上
import { JoyrideService } from 'ngx-joyride';
this.joyrideService.startTour({steps: [触发步骤的数组],themeColor: '#666'//主题色})
触发步骤的数组是一个字符串数组如：['guideUser', 'guideSearch']
如果某个要展示的引导组件在某个路由下面
比如搜索按钮的引导 guideSearch 在/home/search 路由下面，那么可以写成
['guideUser', 'guideSearch@home/search']
而组件中的joyrideStep="guideSearch"依然不需要变化，至于joyrideStep见步骤6
6、组件模板中
这个时候可以在组件模板中，
如果是跟模块结合子模块的JoyrideModule，
那么可以在所有模块中引入JoyrideModule的组件中定义引导步骤和数据
<div joyrideStep="guideUser" title="用户相关" text="用户信息和上传头像"></div>
其中guideUser要放到触发步骤的数组中去
如果使用了angular 国际化的话，
可能会遇到text无法正常使用 | translate管道
那么可以使用另一种方法
<div joyrideStep="guideUser" [stepContent]="guideUserT"></div>
<ng-template #guideUserT>{{'用户信息和上传头像' | translate}}</ng-template>
注意：guideUserT 是自定义的名称，两个保持一致即可
若是碰到for循环生产代码绑定模板变量
不能直接将模板变量的字符串放到循环数据中
这样循环出来的数据绑定后不生效
需要直接循环模板变量才行
如下
<ng-container *ngFor="let item of [guideSideDataT,guideSideAheadT,guideSideAdminT,guideSideSettingsT,guideSideAboutT];index as i;">
<a *ngIf="asideMenu[i].jview" [routerLink]="'/home/'+asideMenu[i].link"
routerLinkActive="active" class="navigation-link" matRipple [joyrideStep]="asideMenu[i].joyrideStep" [stepContent]="item" stepPosition="right">
<span class="navigation-link-title">{{ ('side' | translate)[asideMenu[i].link] }}</span>
</a>
</ng-container>
<ng-template #guideSideDataT>{{'appGuides.guide03' | translate}}</ng-template>
<ng-template #guideSideAheadT>{{'appGuides.guide04' | translate}}</ng-template>
<ng-template #guideSideAdminT>{{'appGuides.guide05' | translate}}</ng-template>
<ng-template #guideSideSettingsT>{{'appGuides.guide06' | translate}}</ng-template>
<ng-template #guideSideAboutT>{{'appGuides.guide07' | translate}}</ng-template>
至此整个ngx-joyride在界面上全局式的使用就描述完了。。。
发表评论：