模态窗口关闭功能不起作用答案

【问题标题】：The modal window close function does not work模态窗口关闭功能不起作用
【发布时间】：2020-01-28 07:18:41
【问题描述】：

我做了一个关于 Angular 的简单项目。在这个项目中，我实现了一个模态窗口。

我的问题是，当模态窗口打开时，关闭窗口的功能不起作用，但是当我再次单击按钮打开模态窗口时，它会关闭。即使我从 open 函数调用 close 函数，它也可以工作。

为什么模态窗口关闭功能不起作用？

链接到创建的项目

https://stackblitz.com/edit/angular-zmytwj

【问题讨论】：

我建议你看看communication between components 是如何工作的。例如，eventEmitter 和 subject。
您的 stackblitz 不完整，并且您的问题中没有代码。很难知道问题:(

标签： angular modal-window

【解决方案1】：

constructor(private overlay: Overlay, private viewContainerRef:ViewContainerRef) {}

初始化组件时应该添加viewContainerRef

ngOnInit() {
    this.overlayRef = this.overlay.create({ hasBackdrop: true });
    this.formComponentPortal = new ComponentPortal(FormComponent, this.viewContainerRef);
  }

还有你的关闭按钮事件

 public onButtonClose() {
     this.overlayRef.detach();
  }

【讨论】：