Question

是否有机会设置弹出窗口的位置，不仅设置弹出窗口，还设置在DOM和DOM中动态创建并附加的任何元素？

默认行为是在DOM的最后添加弹出窗口。该元素将为所有需要它的组件共享（例如，拖放列表放置在应该放置的位置...，但是其拖动项目放置在DOM的最末端）

在您的任务是制作5种具有不同样式的拖放列表变体之前，这是可以的...此共享元素（在本例中为拖动项目）对每个人都意味着该元素的样式相同。如果我更改它，我将为每个人更改它。由于该元素不属于任何人，因此无法编写特定的CSS选择器。

我对剑道控件有同样的问题，但是他们有一个解决方案。有一个简单的设置，您可以将该弹出窗口附加到父组件。

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

您知道如何解决Angular Material的此问题吗？我找不到任何解决方案。谢谢

Answer 1

如果您查看角度材料弹出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

Angular Material-共享的弹出窗口*样式问题

1 个答案: