与我联系

angular界面引导插件ngx-joyride的使用

2019-4-27 一诺 js库

先看几个常用的jquery引导插件效果
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在界面上全局式的使用就描述完了。。。

标签: 插件

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by
emlog