我想展示一个简单的form（如下图所示）作为dropdown当icon被点击。我查看了角材料的组件列表，但找不到任何合适的组件。有menu https://material.angular.io/components/menu/overview但在这种情况下不能使用它。
有人知道我怎样才能实现这个目标吗？
您可以使用 MatMenu，但您需要执行一些操作才能使其正常工作。
第一个是not use 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 上的 https://stackblitz.com/edit/angular-1m3czf-ztwlvz?file=app%2Fmenu-overview-example.html.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
