我想使用menuOpened:角度材质菜单的EventEmitter属性。 谁能帮忙使用此功能?我想打开菜单上的事件。
我正在使用Angular 6和Angular Material Menu。
答案 0 :(得分:2)
将侦听器放在触发菜单的元素上:
<button mat-icon-button [matMenuTriggerFor]="mMenu" (menuOpened)="menuOpened()">
<mat-icon>edit</mat-icon>
</button>
<mat-menu #mMenu>
<button mat-menu-item>...</button>
<button mat-menu-item>---</button>
</mat-menu>
在ts
中:
menuOpened() {
console.log('Menu is open');
}
答案 1 :(得分:1)
对于那些正在寻找Angular 8+解决方案的人来说,解决方案更加简单。根据{{3}},我们应仅使用以下属性:
@Output()menuClosed: EventEmitter<void>
-关闭关联菜单时发出的事件。
@Output() menuOpened: EventEmitter<void>
-打开关联菜单时发出的事件。
在HTML中(div触发器)
<div class="user d-flex align-items-center border-left pl-4" (menuOpened)="menuOpened()" (menuClosed)="menuClosed()"
[matMenuTriggerFor]="userProfile">
<mat-icon class="icon-account">account_circle</mat-icon>
<div class="d-flex flex-column mx-2">
<span class="label-user">{{ profile?.fullname }}</span>
<span class="label-role">{{ profile?.roles[0].name }}</span>
</div>
<mat-icon class="icon-arrow">keyboard_arrow_down</mat-icon>
</div>
在HTML中(mat-menu)
<mat-menu class="menu-card" [class]="'custom-panel-menu'" #userProfile="matMenu" yPosition="below" xPosition="before">
<div class="d-flex flex-row px-3 pb-1 content-profile">
<div class="options-user d-flex flex-column">
<span class="username"></span>
<div class="menu-user">
<mat-list class="list-menu">
<h3 class="primary-text" mat-subheader>{{ profile?.email }}</h3>
<mat-list-item (click)="openOptionMenu(menu)" *ngFor="let menu of menus">
<mat-icon class="menu-icon" mat-list-icon>{{ menu.icon}}</mat-icon>
<span class="menu-item-text" mat-line> {{menu.name}} </span>
...
...
</mat-menu>
在TS中:
menuOpened() {
console.log('menuOpened @configbug')
}
menuClosed() {
console.log('menuClosed @configbug')
}