angular - 使用 Material 对话框在 Angular 元素上显示问题(ShadowDom 问题？)

Question

我将接触 Angular 7 上的 Angular Elements 来构建轻量级 Web 组件，这些组件可以轻松部署在现有网页中。 第一次测试很有希望，但是我在基于 Angular Material (MatDialog) 的对话框中遇到了显示问题。 如果我将 Angular 组件 (FilterComponent) 构建为 Angular 元素，并在简单的 HTML5 网页中运行生成的 Web 组件，则对话框将直接显示在基本网页上，而不是分离的框上。

我使用当前稳定版本的 Angular/cli 7.3.8。

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    SearchElementComponent,
    FilterDialogComponent,
    FilterComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MaterialModule,
    ReactiveFormsModule,
  ],
  entryComponents: [SearchElementComponent, FilterComponent, FilterDialogComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    // Convert `SearchElementComponent` to a custom element.
    const SearchElementElement = createCustomElement(SearchElementComponent, {injector: this.injector});
    // Register the custom element with the browser.
    customElements.define('search-element', SearchElementElement);

    const FilterComponentElement = createCustomElement(FilterComponent, {injector: this.injector});
    customElements.define('filter-element', FilterComponentElement);
  }
}

过滤器.组件.ts:

@Component({
  selector: 'app-filter',
  template: `
    <button mat-mini-fab class="filer-button" (click)="openFilterDialog()" title="Filter">
      <i class="material-icons filter-icon">filter_list</i>
    </button>
  `,
  styleUrls: ['./filter.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class FilterComponent {
  topicMedical = true;
  topicPharma = true;
  topicBiotec = true;

  constructor(
    public dialog: MatDialog,
  ) { }

  public openFilterDialog(): void {
    const dialogRef = this.dialog.open(FilterDialogComponent, {
      panelClass: 'filterDialog',
      autoFocus: false,
      minWidth: 350,
      maxWidth: '60%',
      maxHeight: '45%',
      data: {
        topicMedical: this.topicMedical,
        topicPharma: this.topicPharma,
        topicBiotec: this.topicBiotec,
      }
    });
    dialogRef.afterClosed().subscribe(data => {
      console.log('Filter dialog closed. ');
    });
  }
}

过滤器-dialog.component.ts:

@Component({
  selector: 'app-filter-dialog',
  templateUrl: './filter-dialog.component.html',
  styleUrls: ['./filter-dialog.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class FilterDialogComponent {


  constructor(
    public dialogRef: MatDialogRef<FilterDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: FilterDialogData) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

有人可以提示我为什么对话框不能按预期工作吗？

按预期显示为常规 Angular 应用程序

但是:在简单网页中显示为 Angular 元素/Web 组件 - 未分离的对话框

我会感谢您的所有评论:-)

Answer 1

这个错误不是模态和显示的问题。这是 CSS 文件的问题。我通过将 css 文件添加到 html 中来解决这个问题。尝试添加这个:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

为了以良好的方式做到这一点，我将 CSS 重写为组件 CSS，然后一切都会好起来的。您还可以尝试将所有 CSS 从 Material Dialog 和其他自定义 css 提取到一个文件，然后将其包含到您的网站中。您还应该阅读有关 Angular 组件中的 ViewEncapsulation 的内容。