Как определить компонент или сервис для настройки загрузчика ng4 - PullRequest
Новая
       5

Как определить компонент или сервис для настройки загрузчика ng4

0 голосов
/ 08 сентября 2018

Я использую 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?

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Я разработал компонент, и он работает.

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>
0 голосов
/ 08 сентября 2018

Я сталкивался с этой проблемой ранее, многократно используя компонент в приложении и привязывая к нему некоторую конфигурацию, а при изменении какой-либо конфигурации вы должны просмотреть все приложения и отредактировать их.

Я решаю это с помощью интерфейса, в вашем случае «NgLoadingConfigInterface»: 

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

в этом интерфейсе вы устанавливаете общие атрибуты для всего приложения.

всякий раз, когда вы используете компонент «Ng4-loading», вы будете реализовывать этот интерфейс следующим образом: 

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

в шаблоне просто свяжите атрибут компонента Ng4-loading с атрибутами из интерфейса. 

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

таким образом, вы просто обновите значения в интерфейсе, и это отразится на всем приложении.

другое решение заключается в инкапсуляции компонента в другом компоненте, таким образом вы передадите атрибуты, которые необходимо изменить, как @Input

...