Question

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

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

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;
}

Here it is on StackBlitz。

Answer 2

如果 Menu Api 对您的情况没有帮助，
，则可以将 Dialog Api 与updatePosition一起使用，并与hasBackdrop: false。

使用hasBackdrop: false不会创建叠加层。
打开要显示下拉菜单的按钮旁边的对话框。
Demo Opening Dialog at desired location

从组件打开对话框，方式为：

let  dialogRef = this.dialog.open(ExampleDialogComponent, {
        width: '250px',
        data: filterData,
        hasBackdrop: false,
        panelClass: 'filter-popup'
      });

在对话框组件中：

ngOnInit() {
    this.filterData = this.data;
    const rightMostPos = window.innerWidth - Number(this.filterData.left);
    this.dialogRef.updatePosition({ top: `${this.filterData.top}px`,
    right: `${rightMostPos}px`});
  }

应用代码：
https://stackblitz.com/edit/angular-mat-dialog-updated-position?file=app%2Fexample%2Fexample-dialog%2Fexample-dialog.component.ts

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

2 个答案: