Question

在<mat-menu>上使用<mat-form-field>时，它将焦点从输入中移出。我希望用户可以在打开菜单的同时使用输入。

这可能吗？

<mat-form-field appearance="outline" [matMenuTriggerFor]="appMenu">
  <mat-label>Label color</mat-label>
  <div class="color-container">
    <div class="color-dot" [style.backgroundColor]="label.color"></div>
  </div>
  <input #input matInput class="pl-2" [(ngModel)]="label.color">
</mat-form-field>


<mat-menu #appMenu="matMenu" yPosition="below" [overlapTrigger]="false">
  <mat-grid-list cols="8" rowHeight="30px">
    <mat-grid-tile *ngFor="let color of colors">
      <div mat-menu-item class="menu-item">
        <div class="color-dot" [style.backgroundColor]="color" 
                               (click)="label.color = color"></div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</mat-menu>

stackblitz example

Answer 1

如果要在打开菜单的同时输入文本并假定您单击颜色项（在其上添加光标指针）以打开菜单，则需要将“ matMenuTriggerFor”移动到较低级别的元素：

<div class="color-container" [matMenuTriggerFor]="appMenu">
    <div class="color-dot" [style.backgroundColor]="label.color"></div>
</div>

如果您仍然希望它处于最高级别-难度要大得多（您将需要在内部级别开始允许和阻止事件）。

Answer 2

您可以通过添加

轻松实现这一目标

<mat-menu #myMenu="matMenu">
    <form (click)="stopPropagation($event)">
        <!-- Your content and inputs -->
    </form>
</mat-menu>

在您的组件中

stopPropagation(event){
    event.stopPropagation();
}

这将防止事件传播，因此打开菜单的按钮将不会收到“切换”触发器。

Answer 3

据我了解，您希望您在较低级别的Mat-menu菜单之外输入内容，同时以不同的颜色选项作为参考打开Mat菜单。如果不是这种情况，则应如上所述将mat-form-field标签放入mat-menu标签中。唯一的事情是我不明白为什么您必须防止关闭菜单以专注于输入，因为这对我来说从来没有发生过，只有当您在其中输入时，才能使用Tab键关闭菜单，在这种情况下，您必须捕获并防止keydown事件，同时还要防止ESC键...但是，如果要打开菜单并能够在较低级别的输入上进行写操作同时，您所要做的就是禁用背景菜单。您可以像这样在html上制作它：

<mat-menu #myMenu="matMenu" [hasBackdrop]="false"></mat-menu>

在Material2中打开mat-menu时使用mat-input

3 个答案: