在自定义元素中使用时,垫对话框无法正确显示

时间:2018-12-28 02:50:35

标签: angular-material angular-cdk angular-elements

我正在尝试在我的角度自定义元素中使用mat-dialog。我在angular应用程序中工作正常,但在构建自定义元素时似乎无法捆绑材质主题。

当我在angular应用之外检查代码时,任何cdk类都没有样式。在角度服务器中运行时,一切似乎工作正常。如何在自定义元素中包含所需的CSS?

我的app.module文件

@NgModule({
  [ ...
   MatFormFieldModule,
   MatIconModule,
   MatSelectModule,
   MatInputModule,
   MatDialogModule,
  ...
 ],
  providers: [ConnectBackendService],
  entryComponents: [AppComponent, PopupComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(AppComponent, { injector });
    customElements.define('my-element', <Function>el);
  }

 ngDoBootstrap() {}
}

和我的styles.css文件

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

我的对话框应该具有绝对的位置,应该与窗口的中心对齐并且应该具有背景。当前,这些都不适用于对话框

2 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,我在Angular组件的GitHub页面上将其报告给了Google。现在,它已被Google标记为“需要解决的低优先级问题”。

https://github.com/angular/components/issues/15968

仅让您和其他看到此线程的人知道,以便他们在Google修复此问题时可以在我的github帖子中找到将来的修复方法。

答案 1 :(得分:0)

通过转到angular.json文件修复了此问题,将extractCss属性更改为false并添加了styles.js来构建文件