ngx-loading не загружается через сервис в angular 5

Question

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

В моем представлении компонентов я добавляю это:

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

Я могу загрузить это, используя этот код внутри моего component.ts, используя:

   public loading = false;
    onSubmit(user) {
            this.loading = true;
     }

Здесь мой код работает и загружается нормально, но у меня есть служба под названием svg service. Я использую этот код:

onSubmit(user) {      
     this.SvgService.test();
     }

И в моем сервисе я пытаюсь это:

  test() {
    this.loading = true;
   }

это не работает, как я могу запустить загрузчик из служб.

Answer 1

Редактировать: еще один вариант, о котором я только что подумал, это добавить метод в ваш компонент, например так:

isLoading(): boolean {
    return this.SvgService.loading;

}

А затем HTML:

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

Это дает лучшее из обоих миров.

Оригинальный ответ:

Базовым решением было бы обновить HTML-код вашего компонента так:

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

Обычно я не поддерживаю ссылку насервис из шаблона компонента однако.Я бы решил это, добавив rxjs / Subject к SvgService и подписавшись на него через ваш компонент.

In SvGService:

loading$: Observable<boolean>;
private loading: Subject<boolean>;

constructor() {
    this.loading = new Subject<boolean>();
    this.loading$ = this.loading.asObservable();
}

public updateLoading(loading: boolean): void {
    this.loading.next(loading);
}

А затем используйте this.updateLoading(true|false) вместоиз this.loading = true|false;

В вашем компоненте:

constructor(...) {
    this.SvgService.loading$.subscribe(loading => {
        this.loading = loading;
    });
}

При использовании этого метода вы все равно сохраните свойство loading в своем компоненте и оставите свой HTML без изменений.