Проблемы с отображением угловых элементов в диалоге материалов (проблема с ShadowDom?) - PullRequest
Новая
       32

Проблемы с отображением угловых элементов в диалоге материалов (проблема с ShadowDom?)

0 голосов
/ 27 апреля 2019

Я собираюсь связаться с Angular Elements на Angular 7 для создания легких веб-компонентов, которые можно просто развернуть на существующих веб-страницах. Первые тесты были многообещающими, однако у меня возникли проблемы с отображением диалогов на основе Angular Material (MatDialog). Если я создаю компонент Angular (FilterComponent) как элемент Angular и запускаю созданный веб-компонент на простой веб-странице HTML5, диалоговое окно отображается непосредственно на базовой веб-странице, а не в отдельном окне.

Я использую стабильную версию 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. ');
    });
  }
}

фильтр-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();
  }

}

У кого-нибудь есть подсказка, почему диалоговое окно не работает должным образом?

Отображается, как и ожидалось, как обычное угловое приложение Display as expected as regular Angular app

Однако: отображается как угловой элемент / веб-компонент на простой веб-странице, а не в отдельном диалоговом окне. Display as Angular Element - not detached dialog box

Буду признателен за все ваши комментарии: -)

1 Ответ

0 голосов
/ 12 июня 2019

Диалог материала, содержащий ваш «FilterComponent», вероятно, прикреплен к элементу body.

Таким образом, делая диалог недоступным для стилей материалов, которые вы импортировали в Shadow DOM.

См. Связанную проблему: https://github.com/angular/components/issues/13837

...