1

我正在尝试在我的角度自定义元素中使用 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";

我的对话框应该有绝对定位，应该与窗口的中心对齐并且应该有一个背景。目前，这些都不适用于对话框

4

2 回答 2

0

通过转到angular.json文件来修复它，将extractCss属性更改为 false 并添加 styles.js 来构建文件

于 2020-12-02T02:02:11.230 回答
0

我有同样的问题，我在他们的 GitHub 页面上向谷歌报告了 Angular 组件。它现在被 Google 标记为“需要解决的低优先级问题”。

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

只是让您和任何看到此线程的其他人知道，以便他们可以在我的 github 帖子中找到可能的未来修复，当/如果 Google 修复此问题时。

于 2019-05-09T08:13:56.293 回答