如何在角形材料的下拉菜单中显示形式？

Question

我想显示一个简单的form（如下图所示），dropdown当icon单击an时。我查看了角形材料的组件列表，但找不到适合的组件。有菜单，但是在这种情况下不能使用。

有人知道我该怎么做到吗？

Answer 1

您可以使用MatMenu，但需要做一些事情才能使其工作。

首先是不要使用mat-menu-item。这会强制在项目上设置样式，使其具有与菜单项目相同的固定高度。

第二个是防止交互传播回菜单，从而在您尝试使用表单时将其关闭。在菜单内表单最外面的父级上使用Event.stopPropagation（）函数。您可能还想防止菜单在背景幕上单击时关闭（并添加您自己的关闭或取消按钮）。看起来像：

<mat-menu class="menu-form-wrapper" [hasBackdrop]="false">
  <div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
    <form class="menu-form">
    ...

您还需要注意样式问题。您的表单容器需要占用整个菜单，以便用户无法在其外部单击而仍在菜单上单击，从而导致其关闭。并且您需要覆盖MatMenu添加到其mat-menu-content容器的默认填充。此样式需要在全局样式表中，而不是在组件样式中，在这里可以添加表单的布局：

// override mat-menu-content padding
.menu-form-wrapper .mat-menu-content:not(:empty) {
  padding: 0;
}

// layout for the form
.menu-form-wrapper .menu-form {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

它在StackBlitz上。