使用材质对话框在 Angular Elements 上显示问题（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);
  }
}

filter.component.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. ');
    });
  }
}

filter-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 Element/web 组件 - 不是分离的对话框

我将感谢您的所有意见:-)

Answer 1

包含“FilterComponent”的材质对话框可能附加到 body 元素。

因此，您在 Shadow DOM 中导入的材质样式无法访问该对话框。

请参阅相关问题：https ://github.com/angular/components/issues/13837