如何在 md-menu 项中有一个输入框

Question

我想要一个选项，可以将项目添加到现有列表或创建新列表；类似于 youtube 的 'Add to playlist'。以下类型的作品，但一旦焦点在输入框上，菜单就会消失。有没有一种方法可以禁止在单击菜单中的一项时关闭菜单？

环境是 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>

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

如何在 md-menu 项中有一个输入框

How to have an Input box in an md-menu item

angular-material2

angular