Угловой материал - общие всплывающие окна * проблема стиля - PullRequest
Новая
       6

Угловой материал - общие всплывающие окна * проблема стиля

0 голосов
/ 16 января 2019

есть ли шанс, как установить, где будут всплывающие окна, и не только всплывающие окна, но и любой элемент, который динамически создается и добавляется непосредственно в DOM?

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

Это нормально, пока ваша задача не состоит в том, чтобы создать 5 вариантов перетаскивания списков с разными стилями ... Этот элемент общего доступа (в данном случае элемент перетаскивания) означает одинаковые стили этого элемента для всех. Если я изменю это, я изменю это для всех. Нет способа написать конкретный селектор CSS, потому что этот элемент никому не принадлежит.

У меня была такая же проблема с элементами управления кендо, но у них было решение. Была простая настройка, где вы можете прикрепить это всплывающее окно к родительскому компоненту. 

 this.datePickerTo.kendoComponent.popupSettings = {
  appendTo: 'component'
};

У вас есть идеи, как решить эту проблему для углового материала? Я не могу найти никакого решения. Спасибо

1 Ответ

0 голосов
/ 16 января 2019

Если вы посмотрите на API всплывающих угловых материалов, вы можете найти опцию viewContainerRef в классе MatDialogConfig, поэтому, чтобы получить ваши всплывающие окна внутри хост-компонента, вы можете попробовать передать ссылку на контейнер вида хоста в открытый метод.

https://material.angular.io/components/dialog/api

Вот краткий пример того, как вы можете реализовать это решение: 

@ViewChild('hostComponent') hostComponent;

// You basically have this in a component method
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      viewContainerRef: this.hostComponent.viewContainerRef
});

И в шаблоне вашего компонента вам нужно отметить, что вы видите дочерние элементы следующим образом: 

<ng-template host-component></ng-template>

Вот хорошее прочтение по динамическому управлению компонентами:

https://angular.io/guide/dynamic-component-loader

...