![](/img/trans.png)
[英]StopPropagation on Mat-Menu except certain click event - Angular
[英]Javascript $event.stopPropagation() does not work with mat-checkbox inside mat-menu
從其中的復選框中進行選擇時,我正在努力保持材料菜單打開。 任何建議,將不勝感激。 我已經嘗試了解決方案,包括更改為 mat-selection-list,將菜單的每個元素放在具有 (clicked)="$event.stopPropagation();$event.preventDefault();" 的 div 中,並發送被點擊的- 從復選框到輔助方法的事件,做同樣的事情。
例子.component.ts
@Component({
selector: 'example',
templateUrl: 'example.component.html',
styleUrls: ['example.compontent.scss'],
})
export class ExampleComponent implements OnInit {
subscriptions: Subscriptions[] = [];
userSettings: ColumnInfo[] = []; // { columnName: string, isSelected: boolean }
constructor() { }
ngOnInit() {
this.setUserConfiguration(); // prefills userSettings
}
async setUserConfiguration(): Promise<void> {
/* There's code here to pre-fill userSettings, as an example try: */
this.userSettings = ['col1', 'col2', 'col3'].foreach(col => {
return { columnName: col, isSelected: false }
});
}
filterColumn(column: string): boolean {
return this.userSettings.findIndex(col => col.columnName === col) !== -1;
}
toggleColumn(column: ColumnInfo, $event: Event): void {
$event.stopPropagation(); $event.preventDefault();
column.isSelected = !column.isSelected;
}
someOtherFunction($event: Event): void {
console.log($event);
}
public resetUserConfiguration(): void {
this.getDefaultColumnConfiguration().then( // you can use setUserConfiguration for test
res => this.userSettings = res as ColumnInfo[]
);
}
}
<ng-container matColumnDef="context" *ngIf="filterColumn('context')">
<mat-header-cell *matHeaderCellDef style="color: rgb(0, 0, 0, 1);">
<div class="ps-context-menu">
<button mat-icon-button [matMenuTriggerFor]="tablemenu"
test-id="open-tablemenu-btn">
<mat-icon fontIcon="more_vert" aria-hidden="true"></mat-icon>
</button>
<mat-menu #tablemenu="matMenu" class="ps-ctx-no-padding filter-menu">
<button mat-menu-item (click)=someOtherFunction($event) test-id="do-something-else">
This button does something else
</button>
<button mat-menu-item test-id="column-properties-btn
[matMenuTriggerFor]="columnproperties">
Column-properties
</button>
<mat-menu #columnproperties class="ps-ctx-no-padding filter-menu"
test-id="column-properties-menu">
<button mat-menu-item test-id="column-filter-btn [matMenuTriggerFor]="filtermenu">
Column filter
</button>
<mat-menu #filtermenu class="ps-ctx-no-padding filter-menu"
test-id="column-filter-menu">
<div (click)="$event.stopPropagation();$event.preventDefault();"
*ngFor="let column of userSettings">
<mat-checkbox [hidden]="column.columnName==='context'"
[checked]="column.isSelected" (click)="toggleColumn(column, $event)">
{{column.columnName}}
</mat-checkbox>
</div>
</mat-menu>
<button mat-menu-item test-id="column-reset-btn"
(click)="resetUserConfiguration()">
Reset column-selection
</button>
</mat-menu>
</mat-menu>
</div>
</mat-header-cell>
</ng-container>
我最終意識到了這個問題。 每次調用 toggleColumn 時,菜單所在的 DOM 都必須重新呈現。 因此菜單“關閉”。
在此 DOM 之外設置菜單解決了這個問題,使用 stopPropagation 從來沒有像我最初預期的那樣出現問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.