代码之家 › 专栏 › 技术社区 › Ali

如何定义自定义NG4加载微调器的组件或服务

spinner typescript angular

Ali · 技术社区 · 6 年前

我在我的项目中使用了NG4加载自旋体。而且非常好。

您可以根据需要自定义NG4加载微调器。例如,您可以更改超时或模板。

<ng4-loading-spinner [threshold]="2000" [timeout]="4000" [template]="template" [zIndex]="9999"></ng4-loading-spinner>

但是,如果我想在NG4加载微调器中更改一些特性,我应该在使用NG4加载微调器的每个组件中进行更改。

如何定义自定义NG4加载微调器的组件或服务?

2 回复 | 直到 6 年前

Raed Khalaf 6 年前

我以前遇到过这个问题,在应用程序中多次使用一个组件,并将一些配置绑定到它,在更改某些配置时,您应该检查所有的应用程序使用情况并编辑它们。

我使用一个接口来解决这个问题,在您的例子中,“ngloadingconfiginterface”:

export interface NgLoadingConfigInterface {
 threshold: 2000,
 timeout: 4000,
 zIndex: 9999,
}

在这个接口中,您可以在应用程序中设置公共属性。

每当您使用“NG4加载”组件时,您将按如下方式实现此接口:

@Component({
   ...
})
export class SomeComponent implements NgLoadingConfigInterface {
  ....
}

在模板中,只需将ng4加载组件属性绑定到接口的属性。

<ng4-loading-spinner [threshold]="threshold" [timeout]="timeout" [zIndex]="zIndex">
<ng4-loading-spinner>

这样,您将只更新接口中的值,它将反映整个应用程序。

另一种解决方案是将组件封装到另一个组件中,这样您将传递需要更改的属性 @输入

Ali 6 年前

我设计了一个组件,它起作用了。

自旋体组件:

import { Component, Input, OnInit, OnChanges } from '@angular/core';

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit, OnChanges {

  @Input() isDisplay: boolean = false;

  constructor(private spinnerService: Ng4LoadingSpinnerService) { }

  ngOnInit() {

  }
  //----------------------------------------------------------------------------
  ngOnChanges(){

    if(this.isDisplay){          
      this.spinnerService.show();
    }else{       
      this.spinnerService.hide();
    }
  }
}

spinner.component.html:

<ng4-loading-spinner [threshold]="2000" [timeout]="40000" [zIndex]="9999"></ng4-loading-spinner>

现在您可以在其他组件中使用此组件,

this.isDisplaySpinner = true;
    this.http.get(GLOBAL['CONFIG_URL'])
        .subscribe(data => {
            this.isDisplaySpinner = false;
        });

HTML:

<app-spinner [isDisplay]="isDisplaySpinner"></app-spinner>