ngx-loading 从另一个组件切换答案

【问题标题】：ngx-loading Toggling from another componentngx-loading 从另一个组件切换
【发布时间】：2026-02-16 05:05:02
【问题描述】：

我正在使用ngx-loading 并希望能够触发它在子组件中显示/隐藏。这是我目前拥有的：

App.Component

import { Component, Injectable } from '@angular/core';

@Injectable()
export class AppComponent implements OnInit{
  public loading = false;

  constructor() { }

  loader() {
    this.loading = !this.loading;
    console.log(this.loading);
  }
}

子组件

import { AppComponent} from '../app/app-component';
import { MyService } from '../service/my-service';

@Component({
  selector:'child-component',
  templateUrl: './child.component.html',
  providers: [AppComponent, MyService]
})

export class ChildComponent implments OnInit {
  constructor(private loader: AppComponent, private service: MyService) {}

  ngOnInit(): void {
    this.getData();
  }


  getData() {
    this.loader.loader();
    this.service.getDataFromService().then(res => {
      this.myModel = res;
      this.loader.loader();
    }
  }
}

如果我检查我的日志 this.loader 是从 true 切换到 false 但 ngx-loading 组件不是。如果我在 app.component 中设置加载的初始值，ngx-loading 会显示但不会隐藏。所以我知道加载器正在工作。

有什么想法吗？

【问题讨论】：

标签： angular

【解决方案1】：

原因是更改检测没有运行。我创建了一个Plunker 来使其工作。我建议您使用 EventEmmiter(Output)。主要思想是在promise完成后，运行setTimeout来触发changeDetection。

this.getData().then(() => {          
   setTimeout(() => {
      this.load.emit()
   })

【讨论】：

谢谢@alexKhymenko