Question

我在展开的<mat-menu>上切换图标时遇到问题。
为扩展下拉菜单，我使用了[matMenuTriggerFor]="menu"。
当我在下拉菜单之外单击时，下拉菜单会展开并隐藏。

问题：
我无法弄清楚在显示下拉菜单时如何将<mat-icon>expand_more</mat-icon>切换到<mat-icon>expand_less</mat-icon>，而在隐藏下拉菜单时如何相反。
我注意到显示下拉列表时，其中一个div上存在[aria-expanded]="true"属性。整个属性会在关闭下拉菜单时消失。
能否帮助我实现下拉菜单上的切换图标？

如您所见，在{{iconExpand}}插值中，我想在切换下拉菜单中提供图标名称。

<div class="NavbarUser" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <tl-mat-button [noPadding]="true" [colorTheme]="'linkGrey'"
  class="NavbarUserName tl-mat-padding-r-base">
    {{ input.user.fullName }}
  </tl-mat-button>
  <tl-mat-image-thumbnail [size]="'small'" [thumbnailUrl]="input.user.thumbnailUrl">
  </tl-mat-image-thumbnail>

  <mat-icon class="Profile__DropdownArrow--Icon">{{iconExpand}}</mat-icon>
  <mat-menu #menu="matMenu">
    <div>
      <hr/>
    </div>
    <button mat-menu-item *ngFor="let profileButton of input.dropDownPaths"
    [routerLink]="profileButton.relativeUrl">
      <img class="Profile__Dropdown--Icons" src="{{profileButton.iconUrl}}" />
      <span class="Profile__Dropdown--Text">{{profileButton.title}}</span>
    </button>
  </mat-menu>
</div>

Answer 1

只需检查menuOpen属性：

<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <mat-icon>
    {{menuTrigger.menuOpen ? 'expand_less' : 'expand_more'}}
  </mat-icon>
</div>

角度7 +角度材质。如何在扩展的菜单下拉菜单中切换图标？

1 个答案: