我有一个更复杂的 Angular 应用程序，我想将其部署为 Angular/elements Web 组件。该应用程序使用 mat-dialog，并且 Web 组件也不会占用 100% 的浏览器窗口大小。
我的问题是 mat-dialog 的 cdk-overlay 默认添加到 html 页面的正文中，并且我的对话框在 Web 组件之外打开。
我想将覆盖层放置在 web 组件内部，这样它就不会干扰组件外部的 html。
我尝试提供一个自定义 OverlayContainer，如第一个答案中所述：将 MatDialog 弹出窗口添加到 Angular Root 而不是主体 https://stackoverflow.com/questions/52763285/add-matdialog-popup-to-angular-root-and-not-to-body/61074576#61074576
然而，我的角度应用程序没有引导，因为我使用角度/元素来构建网络组件，因此不使用模块引导。我的自定义 OverlayContainer 只是没有使用。
有谁知道这个问题的解决方案？
谢谢你！
我也有类似的情况。我使用 ShadowDom 封装将我的组件之一导出为自定义 Web 组件（“Angular Elements”）。问题是来自使用页面的样式仍然会泄漏到对话框、日期选择器等中，因为覆盖层被添加到正文中，而不是影子根中。
我找到了您链接的解决方案 https://stackoverflow.com/questions/52763285/add-matdialog-popup-to-angular-root-and-not-to-body/61074576#61074576工作得很好，有一些变化：
- Use
position: fixed代替position: absolute所以对话框将保持在屏幕中央。
- 就像是
document.querySelector('#angular-app-root')当我将它放在影子根内的组件中时，似乎没有找到我的元素。相反，我最终得到了类似的东西document.querySelector('my-exported-web-component')?.shadowRoot?.querySelector('#angular-app-root');
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
