Добавьте всплывающее окно MatDialog в Angular Root, а не в тело - PullRequest
Новая
       8

Добавьте всплывающее окно MatDialog в Angular Root, а не в тело

0 голосов
/ 11 октября 2018

Я сделал приложение Angular 6, в котором у меня есть MatDialog.Это прекрасно работает в режиме разработки.

Теперь я должен внедрить это в существующий веб-сайт (который использует sitecore 9).Это прекрасно работает, за исключением того, что диалоги не открываются правильно.Я обнаружил, что диалоги добавляются в тело, а не в мой корневой угловой элемент DOM. 

<html>
  <head></head>
  <body>
    <app-library>...</app-library>

    <div class="cdk-overlay-container">...</div>
  </body>
</html>

Есть ли способ добавить диалог в элемент углового приложения (в моем случае) ине к элементу body?

Я уже пытался использовать опцию viewContainerRef matDialog, но, похоже, это не работает: 

export class AppComponent implements OnInit {
  constructor(..., public viewRef: ViewContainerRef) {
}

export class FilterToggleComponent implements OnInit {
  constructor(..., public dialog: MatDialog, private appRef: ApplicationRef) {}
  openFilterPanel() {
    const viewRef = (this.appRef.components[0].instance as AppComponent).viewRef;
    const dialogRef = this.dialog.open(FilterPanelComponent, {
      width: '100vw',
      height: '100%',
      panelClass: 'search-filter-panel-modal',
      viewContainerRef: viewRef
    });
  }
}
...