angular - vmware Clarity：为每个下拉项定义不同的 clrCloseMenuOnItemClick 行为

Question

我有一个标准的 Clarity 下拉菜单，我需要为每个项目定义“单击项目时关闭菜单”行为：因此，单击第一个下拉菜单项应该关闭菜单，单击第二个项目不应该。这可能吗？我确信这不是 Clarity 团队的预期行为，但在我非常罕见的用例中它是有道理的。

我使用 Angular 6 和 Clarity 0.13.0

Answer 1

您可以通过使用双向绑定来轻松地执行此自定义行为[(clrIfOpen)]，以强制下拉在您想要的少数情况下关闭。这是一个正在运行的示例：https ://stackblitz.com/edit/dropdown-close-on-some-clicks?file=src/app/app.component.html

请注意，我必须使用脱糖语法 with<ng-template>才能使用结构指令的双向绑定：

<clr-dropdown [clrCloseMenuOnItemClick]="false">
  <button clrDropdownTrigger>...</button>
  <ng-template [(clrIfOpen)]="open">
    <clr-dropdown-menu>
      <button type="button" clrDropdownItem>Does not close</button>
      <button type="button" clrDropdownItem (click)="close()">Closes the dropdown</button>
      <button type="button" clrDropdownItem>Does not close either</button>
    </clr-dropdown-menu>
  </ng-template>
</clr-dropdown>