Angular4_loading提示

Installation

Install ngx-loading via NPM, using the command below.

NPM

npm install --save ngx-loading

Getting started

LoadingModule 
import { BrowserModule } from '@angular/platform-browser';
  
import { NgModule } from '@angular/core';
  
import { CoreModule } from './core/core.module';
  
import { LoadingModule } from 'ngx-loading';
  
 
  
@NgModule({
  
  //...
  
  imports: [
  
    //...
  
    LoadingModule
  
  ],
  
  //...
  
})
  
export class AppModule { }
 
loading 
import { Component, OnInit } from '@angular/core';
  
 
  
@Component({
  
    //...
  
})
  
export class AppComponent implements OnInit {
  
    //...
  
    public loading = false;
  
 
  
    constructor(private authService: AuthService) { }
  
 
  
    ngOnInit() { }
  
 
  
    Login() {
  
        this.loading = true;
  
        this.authService.login(this.email, this.password)
  
            .subscribe(res => {
  
                this.loading = false;
  
                //...
  
            }, err => {
  
                this.loading = false;
  
                //...
  
            });
  
    }
  
}

[show] input variable of ngx-loading to point to your boolean, which will determine when ngx-loading is visible. Optionally set the [config] input variable of ngx-loading to setup custom configuration options. If the [config] input variable is not set, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See - Config options for further information.position attribute set to relative.

<div class="my-container">
  
    <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
  
    //...
  
</div>

Input parameters

The ngx-loading input parameters are displayed below.

Config options

.forRoot() module import statement), as well as being passed into each ngx-loading instance, if required. Config options that are passed into an ngx-loading element will override any custom global config options that have been set. A combination of the two can be used together if appropriate. If no config is set, the default ngx-loading config options will be used. Please see below for an example custom configuration setup, using both global and local configurations.

import { BrowserModule } from '@angular/platform-browser';
  
import { NgModule } from '@angular/core';
  
import { CoreModule } from './core/core.module';
  
import { LoadingModule, ANIMATION_TYPES } from 'ngx-loading';
  
 
  
@NgModule({
  
  //...
  
  imports: [
  
    //...
  
    LoadingModule.forRoot({
  
        animationType: ANIMATION_TYPES.wanderingCubes,
  
        backdropBackgroundColour: 'rgba(0,0,0,0.1)', 
  
        backdropBorderRadius: '4px',
  
        primaryColour: '#ffffff', 
  
        secondaryColour: '#ffffff', 
  
        tertiaryColour: '#ffffff'
  
    })
  
  ],
  
  //...
  
})
  
export class AppModule { }
 
<div class="my-container">
  
    <ngx-loading [show]="loading" [config]="{ animationType: ANIMATION_TYPES.rectangleBounce,
  
        backdropBackgroundColour: 'rgba(255,255,255,0.3)', backdropBorderRadius: '10px',
  
        primaryColour: '#ffffff', secondaryColour: '#ffffff', tertiaryColour: '#ffffff' }"></ngx-loading>
  
    //...
  
</div>

The config options are displayed below. Each of the properties are optional, and passing a config to ngx-loading is itself, optional.