angular4+百分比进度显示插件用法示例

首先，我们需要使用npm安装一个名为ngx-progressbar的Angular插件，并将其添加到我们的项目中。

npm install ngx-progressbar --save

在app.module.ts中导入和添加NgProgressModule。

import { NgProgressModule } from '@ngx-progressbar/core';

@NgModule({
  imports: [
    NgProgressModule
  ]
})
export class AppModule { }

现在，我们需要为我们的组件选择一种进度条样式。例如，我们选择了样式bar。然后，在我们的组件的ts文件中，我们初始化NgProgress服务，并在需要显示进度条的地方使用start()和done()方法即可。

import { Component } from '@angular/core';
import { NgProgress } from '@ngx-progressbar/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="simulateLoading()">Simulate loading</button>
  `
})
export class AppComponent {
  constructor(private progressService: NgProgress) {}

  simulateLoading() {
    this.progressService.start();
    setTimeout(() => {
      this.progressService.done();
    }, 2000); // 模拟两秒钟的加载过程
  }
}

在这个示例中，我们在组件的HTML代码中添加了一个按钮来模拟加载。我们在按钮的点击事件中调用simulateLoading()方法，这个方法会调用NgProgress服务的start()方法来启动进度条效果，并使用setTimeout()方法模拟了2秒钟的加载过程。在2秒钟到达后，NgProgress服务的done()方法会调用来停止进度条。

以下是另一个示例。我们使用angular-cli创建了一个带有导航菜单的基本应用程序，并将百分比进度条添加到导航路由器上，在每次路由切换时显示百分比进度条。

ng new my-app
cd my-app
ng generate component navigation

在app.module.ts中导入和添加NgProgressRouterModule。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NgProgressRouterModule } from '@ngx-progressbar/router';

import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: AppComponent },
  { path: 'about', component: NavigationComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    NgProgressRouterModule
  ],
  exports: [
    RouterModule,
    NgProgressRouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我们的导航组件中，我们可以使用NgProgressRouter服务来启用路由拦截器，以启动和停止进度栏。这就需要导入类和组件所需的所有库和服务。

import { Component } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { NgProgress } from '@ngx-progressbar/core';
import { NgProgressRouter } from '@ngx-progressbar/router';

@Component({
  selector: 'app-navigation',
  template: `
    <nav>
      <ul>
        <li><a routerLink="/home">Home</a></li>
        <li><a routerLink="/about">About</a></li>
      </ul>
    </nav>
    <div style="height: 200px">Navigation Component Content</div>
    <router-outlet></router-outlet>
  `
})
export class NavigationComponent {
  constructor(
    private router: Router,
    private progress: NgProgress,
    private ngProgressRouter: NgProgressRouter) 
    {}

  ngOnInit() {
    this.ngProgressRouter.start();

    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) { // 路由切换开始时启动进度条
        this.progress.start();
      } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
        // 检测到路由被取消、或者导航结束、或者错误时，停止进度条
        this.progress.done();
      }
    }, error => {
      this.progress.done();
    });
  }
}

在这个示例中，我们在NavigationComponent中使用ngOnInit()生命周期钩子，来启动NgProgressRouter服务，这个服务会自动捕捉路由事件并启动进度栏。在路由切换时，我们使用this.router.events事件来捕捉NavigationStart、NavigationEnd、 NavigationCancel 和 NavigationError 事件，手动启用和停止进度栏。