很多网站或者app， 我们第一次访问或者登陆的时候， 往往会看到好看友好的新手导航页面。如果这个功能我们自己来做， 首先， 首先， 需要有一个弹框， 其次， 获取DOM的位置来确定弹框的显示顺序， 然后要知道新手导航有几步，等等， 想做完美， 不是一件容易的事情。 然而， 我们可以站在居然的肩膀上， 这个巨人就是intro.js
废话不多说了， 进入正题吧！
在三大框架中， 我们选择angular2+ (intro.js有angular（1.x版本）)
首先， 需要安装intro.js
npm install --save intro.js @types/intro.js
安装完成后， 需要引入angular
// 在angular-cli.json文件中加入
···
styles：[
"../node_modules/intro.js/minified/introjs.min.css".
//还可以引入主题的css样式
]
···
scripts：[
"/node_modules/intro.js/minified/intro.min.js".
]
···
最后， 把intro.js导入文件中，
// intro.component.ts
import * as intro from intro.js
···
{
const intro = intro.introJs()
// const intro = intro.introJs('#container') 加参数会在参数的DOM上显示新手导航
intro.setOptions({
skipLabel：'跳过',
doneLabel:'完成',
prevLabel:'上一步',
nextLabel:'下一步'，
steps: [{
element: '#step1', // 在对应的元素上加上 id="#step1"
intro: 'Step one description', // 导航显示的内容， 可以加图片
position: 'bottom' // 导航现实的位置
},
{
element: '#step2',
intro: 'Step <i>two</i> description',
position: 'bottom'
},
{
element: '#step3',
intro: 'Step <span style="color: green;">three</span> description',
position: 'bottom'
}]
});
intro.onbeforechange(()=>{
// 点击下一步导航前的回调
})
.onchange(()=>{
// 点击下一步导航的回调
}).onafterchange(()=>{
// 点击下一步导航后的回调
})
intro.start()
}
···
