Angular 2+自动页面加载进度栏– ngx-loading-bar

Angular 2+自动页面加载进度栏– ngx-loading-bar
插件名称 ngx-loading-bar
发布时间 2020年7月17日
插件作者 aitboudad

Angular 2+应用程序(http,http-客户端和路由器)的零配置全自动加载条。

安装:

# Yarn
$ yarn add @ngx-loading-bar/core

# NPM
$ npm install @ngx-loading-bar/core --save

基本用法:

导入。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { LoadingBarHttpModule } from '@ngx-loading-bar/http';
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: HelloComponent },
      { path: 'home', component: HelloComponent },
    ]),

    BrowserAnimationsModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,

    LoadingBarHttpModule,
    LoadingBarHttpClientModule,
    LoadingBarRouterModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

在您的组件中。

<ngx-loading-bar></ngx-loading-bar>