如何在md-menu项目中添加输入框

Question

我希望能有一个选项，可以将项目添加到现有列表中或创建新的列表，类似于 YouTube 的“添加到播放列表”。以下方式有点可行，但一旦焦点在输入框上，菜单就会消失。是否有办法在菜单项被点击时禁用菜单关闭功能？

环境是 Angular 2 / material 2。

    <button md-raised-button  [mdMenuTriggerFor]="menu">Add To</button>
    <md-menu #menu="mdMenu">
      <button md-menu-item>Item 1</button>
      <button md-menu-item>Item 2</button>
      <md-input-container class="mx-4">
        <input mdInput placeholder="Create new" value="">
      </md-input-container>
    </md-menu>

- vrtx54234

Answer 1

你可以通过停止 <md-input-container> 中的 click 事件传播来实现。

HTML：

<md-input-container class="mx-4" (click)="stopPropagation($event)">

ts:

stopPropagation(event){
  event.stopPropagation();
  // console.log("Clicked!");
}

plunker demo

- Nehal

---

是的，我也从 https://github.com/angular/material2/issues/2612#issuecomment-280156377 得到了同样的提示；谢谢。 - vrtx54234

哦，太酷了！我不知道这个问题在Github上有一个issue，谢谢 :) - Nehal

Angular Material 8: <div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()"><mat-form-field>...Angular Material 8：<div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()"> <mat-form-field>... - Dan