angular5 - 清晰点击后关闭下拉菜单

Question

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

下面是我的 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 组件，然后您希望在单击时自动关闭的任何链接都将clrDropdownItem指令应用于菜单项。

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

Answer 2

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>