Angular 的 cdkMenu 不适用于 ngModel 或表单吗？模板的位置不再靠近按钮

Question

我想为tipTap 文本编辑器创建一个菜单栏。带有标题选择、文本颜色选择等功能的菜单弹出窗口效果很好，因为菜单中只有按钮。现在我想添加另一个菜单项，该菜单项打开两个输入以输入一个链接和一个占位符文本。当我打开菜单时，菜单不会像其他弹出窗口那样出现在按钮下方。它出现在右上角。我使用 ngModel 或 form 作为输入。当我删除 ngModel 或表单时。正如我所料，它出现在菜单图标下方。我认为指令 ngModel 或 forms 不能与 cdkMenue 一起使用。这是真的？弹出窗口关闭功能也被破坏了。

这是我的html：

 <div cdkMenuBar> 
... menuItems ...
<div class='separator'></div>
  <!-- text link -->
  <button
    cdkMenuItem
    type='button'
    class='button'
    title='Platzhalter Link'
    [cdkMenuTriggerFor]='linkMenu'
  >
    <mat-icon class='small'>link</mat-icon>
  </button>
  <!-- link menu -->
  <ng-template #linkMenu>
    <div class='r-color-menu' cdkMenu>
      <form formGroupName='linkPlaceholderForm' (ngSubmit)='onSubmit()'>
        <input type='text' formControlName='link'
               [placeholder]="'link...'"
        />
        <input
          type='text' formControlName='placeholder'
          [placeholder]="'placeholder...'"
        />

        <button (click)='setLink()'>
          setLink
        </button>
        <button (click)='unsetLink()'>
          unsetLink
        </button>
      </form>
    </div>
  </ng-template>

  <div class='separator'></div>

... menuItems ...
</div>

红色容器是我用输入创建的容器，绿色容器是其中带有按钮的容器。事实上，我的红色容器应该看起来和绿色容器一模一样。

如何创建菜单？

Answer 1

无论如何，当我在使用 cdkMenu 时遇到类似的情况时，问题是我在菜单元素上有绝对定位。 从我的CSS中删除它解决了这个问题。您的Stackblitz在菜单元素上没有任何定位，所以也许您遇到了与我相同的问题。

如果相关，解决 Stackblitz 的另外几个问题可以修复一些行为，即：

1. 您有两个具有相同 templateRef 的模板。
2. CDK 菜单的文档在包含菜单栏的元素之外具有模板。
3. 您有一个没有父 FormGroup 指令的

   formGroupName

   。

请参阅 forked Stackblitz 以了解修复程序如何改变行为。