Question

我正在使用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显示中设置加载的初始值但不会隐藏。所以我知道装载机正在工作。

有什么想法吗？

Answer 1

原因是更改检测不会运行。我创建了一个Plunker来使它工作。我建议你使用EventEmmiter（输出）。主要思想是在promise完成后，运行setTimeout来触发changeDetection。

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

ngx-loading从另一个组件切换

1 个答案: