有没有办法向 Angular 材质组件（底页/对话框/Snackbar）添加指令？答案

【问题标题】：Is there a way to add a directive to Angular Material Components (Bottom-sheet/Dialog/Snackbar)?有没有办法向 Angular 材质组件（底页/对话框/Snackbar）添加指令？
【发布时间】：2020-04-10 01:39:18
【问题描述】：

我想在左侧、右侧和底部制作一个侧导航的应用程序，必须使用 Angular Material 组件库 (https://material.angular.io/) 并与 angular-resizeable-element 一起使所有组件可调整大小。这对于左右侧导航非常有效，因为我可以使用材质侧导航组件并简单地将 mwlResizeable 指令添加到 HTML。如下所示，这是按预期工作的。

<mat-sidenav mwlResizable 
             [enableGhostResize]="true"
             [resizeEdges]="{bottom: false, right: false, top: false, left: true}"
             (resizeEnd)="onResizeEnd($event)" 
             position="end" 
             #right>
</mat-sidenav>

对于底部导航面板，我发现 Angular Material 底板组件很合适，因为位置很简单。

我的问题是底部表格，它被称为模态/弹出窗口，如下所示：

let dialogRef = dialog.open(DemoComponent, {
  width: '100vw'
});

这将与底部表中的 DemoComponent 完美地打开我的底部表。我想知道是否有人有一个聪明的解决方案可以将指令添加到打开的弹出窗口中，以便我可以使其（在这种情况下）可调整大小:)。

提前致谢。

【问题讨论】：

您想使用可调整大小作为可附加行为吗？您是否在其他地方使用 DemoComponent 而没有可调整大小的行为？
我想将可调整大小的行为添加到底部组件，该组件基本上是 DemoComponent 的外部组件。（我可以将它添加到 DemoComponent 中，但这不会使我的底页大小发生变化，它只会添加滚动条。
所以您可以尝试将this 应用到您的DemoComponent。
这有点违背我的原则，但由于时间不够，我制作了一个始终位于底页内的默认组件，我在该组件中制作了可调整大小的手柄并将其放在顶部。然后我在自定义事件中修改工作表的高度。哈克但有效；）。如果有人也遇到了这个问题。

标签： angular angular-material angular-directive bottom-sheet

【解决方案1】：

这有点违背我的原则，但由于时间不够，我制作了一个始终位于底页内的默认组件，我在该组件中制作了可调整大小的手柄并将其放在顶部。然后我在自定义事件中修改工作表的高度。哈克但有效；）。如果有人也偶然发现这一点。

【讨论】：