在 Angular 中显示实用程序服务的弹出窗口

Question

我有一个自定义组件 popup.component.ts，我在每个视图的标记中使用它。它位于底部是不可见的。当我要弹出消息时，我只需将绑定字段切换为 this.poppyVisible = true 即可显示。

我意识到我从来没有单独的弹出窗口，所以在我现有的 util.service.ts 文件中添加一个方法来为我弹出窗口是有意义的。但是我不确定我是否可以这样做，如果可以的话，我是否必须传递对视图子项或其他东西的引用。

谷歌搜索这个问题会导致很多 Material 东西显示这种方法，但这并没有真正启发我解决我的问题。还有其他构建整个服务的方法，但它们依赖于第 3 方弹出窗口。

我只需要知道一般方法应该如何制定。我担心跟随错误的博客可能会导致我养成坏习惯。

是否可以让服务在视图中弹出一个组件？我应该 google 做什么来避免默认的 Material/Kendo 东西遮挡视线？

编辑

根据评论，我觉得我可能会澄清，我已经完成了研究，为我提供了关于 that sounds like the only option. I just feel I'm not certain that I actually got it right. I've found this blog 的建议，这些建议很接近，但有太多的开销来过滤掉我的答案，至少在我的技能水平。

Answer 1

在 rxjs Subject Observable 的帮助下。我们可以从 utilservice 打开一个弹出窗口。创建 'showPopup' 和 'hidePopup' 作为 2 个实用程序方法。这些方法将发出 subject observable，因此观察者（在 popup.component.ts 中）可以接收并对其采取行动。

utils.service.ts

private openPopup = new Subject();
public openPopupObservable = this.openPopup.asObservable();

showPopup(){
  this.openPopup.next(true);
}

hidePopup(){
  this.openPopup.next(false);
}

popup.component.ts

constructor(private utils: utilsService){}
ngOnInit(){
   this.utils.openPopupObservable.subscribe(isActive=>{
      this.poppyVisible = isActive
   });
}

在 Angular 中显示实用程序服务的弹出窗口

Showing a popup from a util service in Angular

service

popup

angular