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的服务，我正在使用此代码：

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>

但是，我通常不支持从组件模板中引用服务。我可以通过在SvgService上添加一个rxjs / Subject并通过您的组件进行订阅来解决此问题。

在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不变。

ngx-loading不通过角度5中的服务加载

1 个答案: