有没有办法向 Angular Material 组件 (Bottom-sheet/Dialog/Snackbar) 添加指令？

Question

我想在左侧、右侧和底部制作一个 sidenav 应用程序，必须使用 Angular Material 组件库 (https://material.angular.io/) 并与 angular-resizeable-element 使所有组件都可以调整大小。这对左侧和右侧 sidenav 非常有效，因为我可以使用 material sidenav 组件并简单地将 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 bottom-sheet 组件，因为位置很简单。

我的问题是底部 sheet，它被称为 modal/popup，如下所示：

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

这将打开我的 bottom-sheet 以及 bottom-sheet 中的 DemoComponent。我想知道是否有人有一个聪明的解决方案能够将指令添加到打开的弹出窗口，这样我就可以使它（在这种情况下）可调整大小:)。

提前致谢。

Answer 1

这有点违背我的原则，但由于时间不够，我制作了一个始终位于底部的默认组件sheet，我在该组件中制作了可调整大小的手柄并将其放在顶部。然后我在自定义事件中修改 sheet 的高度。 Hacky 但有效 ;)。如果有人也绊倒了这个。

有没有办法向 Angular Material 组件 (Bottom-sheet/Dialog/Snackbar) 添加指令？

Is there a way to add a directive to Angular Material Components (Bottom-sheet/Dialog/Snackbar)?

angular-directive

angular-material

bottom-sheet

angular