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

Question

我在我的项目中使用ng4-loading-spinner。这非常好。

您可以根据需要自定义ng4-loading-spinner。例如，您可以更改超时或模板。

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

但是，如果我想更改ng4-loading-spinner中的某些功能，我应该在使用ng4-loading-spinner的每个组件中执行此操作。

如何定义用于自定义ng4-loading-spinner的组件或服务？

Answer 1

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

我通过使用接口来解决它，在您的情况下，“NgLoadingConfigInterface”：

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

在此界面中，您可以在整个应用程序中设置公共属性。

无论何时使用“Ng4-loading”组件，您都将实现此接口，如下所示：

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

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

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

通过这种方式，您只需更新界面中的值，它将反映整个应用程序。

---

另一种解决方案是将组件封装在另一个组件中，这样您就可以将需要更改的属性作为@Input传递

Answer 2

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

spinner.component.ts：

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>