Angular 2我如何使一個div出現在父容器中

Question

我想讓我的加載模式彈出在父組件（即「app.component.ts」）。原因是我需要在整個應用程序中多次調用它，我不希望將其粘貼到每個頁面。

然後，我有幾個頁面，這些頁面需要能夠打開和關閉該加載模態屏幕。是通過服務還是使用輸入來完成此操作的最佳方式？

Answer 1

您可以隨時向父級（app.component）發出事件以顯示模式彈出。

app.component.html

<div> 
    <child-component (onShow)="showPopup($event)"></child-component> 
</div> 

app.component.ts

public showPopup(show : boolean){ 
    if(show){ 
    /* code to show popup goes there */ 
    } 
} 

child.component.ts

@Output() onShow= new EventEmitter()<boolean>; 

    public someFunc(){ 
    /*once you are ready to show popup */ 
    this.onShow.emit(true); 
    }