Angular 单击覆盖关闭弹出窗口-错误类型错误：无法读取属性'；nativeElement'；未定义的

我有一个模式弹出窗口。如何通过正确单击覆盖来关闭弹出窗口？错误类型错误：无法读取未定义的属性“nativeElement”

导出类PopupComponent{
@ViewChild（“窗口”）弹出窗口：ElementRef；
可见=假；
openPopup：布尔值；
构造函数（）{}
恩戈尼尼特（）{
}
过度循环（事件）{
if（event.path.indexOf（this.popup.nativeElement）=-1）{
可见=假；
}
}

.window\u容器{
显示：块；
位置：绝对位置；
最小宽度：360px；
z指数：10000；
}
.覆盖{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
z指数：2；
光标：指针；
}

打开
你好

尝试在html元素中添加类似“窗口”的id，而不仅仅是设置类

<div class="overlay" (click)="overlayClicked($event)">
  <div *ngIf="openPopup" #window class=window>
    <h1>Hello</h1>
  </div>
</div>

你好

创建需要声明的slackblitz模板变量