#应用场景:如何添加一个路由的进度条?
#实现思路:查找 Angular (node.js)的官方组件,npmjs.com,详情参照官网组件库提供操作
#实现方法
1. 安装module
>npm install ng2-slim-loading-bar --save
2. 搭桥指令,目的:让Angular 6 与第三方模块对接
>npm i rxjs-compat --save
3. 在app.module.ts中, 导入 module(ng2-slim-loading-bar)
![](https://img2018.cnblogs.com/blog/1371013/201906/1371013-20190613115019987-958979473.png)
4. 导入它的 css // style.css
![](https://img2018.cnblogs.com/blog/1371013/201906/1371013-20190613115103715-1096887637.png)
5. 添加路由 在app.component.html 中添加,加在首行的位置
把ng2-slim-loading-bar当做一条指令(directive)来使用
![](https://img2018.cnblogs.com/blog/1371013/201906/1371013-20190613115138848-468600093.png)
6. 加入路由事件 到 app.component.ts中
![](https://img2018.cnblogs.com/blog/1371013/201906/1371013-20190613115211883-792035986.png)