将 CdkOverlay 放在 angular/elements webcomponent 中 [英] Place CdkOverlay inside angular/elements webcomponent

问题描述

我有一个更复杂的 Angular 应用程序，我想将其部署为 angular/elements webcomponent.该应用程序使用 mat-dialog 并且 webcomponent 也不会占用浏览器窗口大小的 100%.我的问题是 mat-dialog 的 cdk-overlay 默认添加到 html 页面的正文中，而我的对话框在 webcomponent 之外打开.

I have a more complex Angular-application that i want to deploy as a angular/elements webcomponent. The app makes use of mat-dialog and the webcomponent will also not take 100% of the browser windows size. My problem is that the cdk-overlay for the mat-dialog is per default added to the body of the html page and my dialogs are opening outside of the webcomponent.

我想将叠加层放在 webcomponent 内部，这样它就不会干扰组件外部的 html.

I would like to place the overlay inside the webcomponent, so it does not interfere with the html outside the component.

我尝试提供一个自定义 OverlayContainer，如此处第一个答案中所述:将 MatDialog 弹出窗口添加到 Angular Root 而不是主体

I tried to provide a custom OverlayContainer as described in the first answer here: Add MatDialog popup to Angular Root and not to body

但是，我的 angular 应用程序没有引导，因为我使用 angular/elements 来构建 webcomponent，因此不使用模块引导.我的自定义 OverlayContainer 没有使用.

However, my angular app is not bootstrapping as i use angular/elements to build a webcomponent and therefore not use the modules bootstrap. My custom OverlayContainer is just not used.

有人知道解决方案吗?

谢谢！

推荐答案

我也遇到过类似的情况.我使用 ShadowDom 封装将我的一个组件导出为自定义 Web 组件(Angular Elements").问题是来自消费页面的样式仍然会泄漏到对话框、日期选择器等中，因为覆盖被添加到正文中，而不是在阴影根中.

I had a similar situation. I was exporting one of my components as a custom web component ("Angular Elements"), using ShadowDom encapsulation. The problem was that styles from the consuming page would still leak into dialogs, datepickers, etc. because the overlay is added to the body, not in the shadow-root.

我找到了解决方案你链接工作得很好，有一些变化:

I found the solution you linked worked pretty well, with a couple changes:

1. 使用 position: fixed 而不是 position: absolute 这样对话框将保持在屏幕中央.
2. 当我在 shadow-root 内的组件中使用 document.querySelector('#angular-app-root') 之类的东西时，它似乎没有找到我的元素.相反，我最终得到了类似 document.querySelector('my-exported-web-component')?.shadowRoot?.querySelector('#angular-app-root');

1. Use position: fixed instead of position: absolute so the dialog will stay centered on screen.
2. Something like document.querySelector('#angular-app-root') didn't seem to find my element when I had it in the component inside the shadow-root. Instead, I ended up with something like document.querySelector('my-exported-web-component')?.shadowRoot?.querySelector('#angular-app-root');

这篇关于将 CdkOverlay 放在 angular/elements webcomponent 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！