解决angular中使用ng-zorro， cdk-overlay-backdrop-showing覆盖页面，需要点两次的问题。

这个问题，烦扰了我一段时间。曾尝试过了解 cdk-overlay实现原理，看过ng-zorro源码。一直没找到解决方法。google搜到一篇文章： https://www.cnblogs.com/wangmiao2606/p/10179287.html ， 尝试用文章中思路解决。

我首先在styles.less里这样写：

.cdk-overlay-backdrop-showing {
  display: none !important;
}

然后换按照博主的方法。发现有两个bug： 1、不会跟着滚动，2、弹框无法收回。而博主没有给出其它解决方法。只说了“这边会在另外一篇博客中解决”， 然而我没有找到另一篇博客。

 

以下是我粗陋的解决方案， (删除样式‘.cdk-overlay-backdrop-showing {display: none !important;}’)在触发弹出模块后，执行以下函数：

clearCdkOverlay() {
   setTimeout(() => {
     const cdkContainer = document.querySelector('.cdk-overlay-container');
     const cdks = document.querySelectorAll('.cdk-overlay-backdrop-showing');
     cdks.forEach(cdk => {
       cdkContainer.removeChild(cdk);
     });
   }, 100);
}

为什么要延时呢？ 因为cdk-overlay是异步加载。需要等它加载完成。

 

使用框架发现问题，往往很难解决，当项目复杂庞大时，去框架也是浪费时间。 所以不是十分了解的轮子， 自己造为好。

我不会在文章最后说：“这边会在另外一篇博客中解决”这类话。目前没有时间和精力去深挖ng-zorro cdk-overlay底层实现，也许以后会在这篇文章补充。如果您对这方面比较了解，希望可以留言。