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