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>

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

2 个答案: