ngx-loading他のコンポーネントからのトグル

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(); 
    } 
    } 
} 

私がtrueからfalseに切り替えているthis.loaderログが、チェックした場合：ここで私が現在持っているものですngxローディングコンポーネントはありません。 app.componentのngxローディング表示でローディングの初期値を設定しても、非表示にしないでください。だから私はローダーが動作していることを知っています。

アイデア？

Answer 1

理由は、変更検出が実行されないためです。私はそれを動作させるためにPlunkerを作成しました。 EventEmmiter（Output）を使用することをお勧めします。主なアイデアは、約束が終わった後、setTimeoutを実行してchangeDetectionをトリガーします。

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