单击清晰后关闭下拉菜单

Question

我可以 select 下拉菜单并获取数据，但后来下拉菜单没有关闭。

下面是我的 html 代码：

    <clr-dropdown [clrCloseMenuOnItemClick]="true" >
<button type="button" clrDropdownTrigger>
    <clr-icon shape="error" class="is-error" size="24"></clr-icon>
    <clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen> <label
    class="dropdown-header">Dropdown header</label>
<button type="button" class="dropdown-item "
    *ngFor="let module of moduleVal" (click)="selectModuleHandler($event)"
    value={{module}}>{{module}}</button>
</clr-dropdown-menu> </clr-dropdown>

我需要在工作结束后关闭下拉菜单，请帮助我。

Answer 1

您应该为下拉菜单使用 Angular 组件，然后任何 link 您想要在单击时自动关闭，您将 clrDropdownItem 指令应用于菜单项。

https://vmware.github.io/clarity/documentation/v0.11/dropdowns#example

Answer 2

header 上 About 菜单的简单示例：

<div class="header-actions">
    <clr-dropdown>
        <button class="btn" clrDropdownTrigger>
            {{loggedOnUsername}}
            <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
            <button type="button" (click)="openUserDialog = true" clrDropdownItem>Manage Users</button>
            <button type="button" (click)="openAboutDialog = true" clrDropdownItem>About</button>
            <button type="button" (click)="onLogout($event)" clrDropdownItem>Logout</button>
        </clr-dropdown-menu>
    </clr-dropdown>
</div>

单击清晰后关闭下拉菜单

closing dropdown after click in clarity

vmware-clarity

angular5