主页 / 问题 / 866322
Accepted
Java Junior
Asked:2020-08-09 15:00:10 +0800 CST2020-08-09 15:00:10 +0800 CST

角。上下文菜单

  • 772

按下鼠标右键时需要实现上下文菜单。谷歌 Angular 项目。

<!-- Last Modified Column -->
  <ng-container matColumnDef="modified">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      <div align="left">По дате изменения</div>
    </th>
    <td mat-cell *matCellDef="let item" [matMenuTriggerFor]="contextmenu" (contextmenu)="openContext()"> {{item.modified.slice(0,10)}} я </td>
  </ng-container>

openContext() {
this.triggerContext.openMenu();
}

按左键时菜单打开，但按右键时菜单不起作用！

angular

1 个回答

  1. Best Answer

    没有任何问题MatMenuTrigger- 从名称中您可以理解该指令的作用。

    我不知道你的整个模板，除了菜单在哪里，我会用一个小例子告诉你。

    首先，让我们禁用contextmenu文档上的事件：

    // app.component.ts

@Component({ ... })
export class AppComponent {
    constructor(private zone: NgZone) {
        this.zone.runOutsideAngular(() => {
            document.addEventListener('contextmenu', (e: MouseEvent) => {
                e.preventDefault();
            });
        });
    }
}

    在模板中，我们创建了一个菜单、一个触发器和一个用于右键单击的按钮，在您的情况下是在一个组件中mat-table：

    // app.component.html 

<mat-menu #menu="matMenu">
    <button mat-menu-item>Кнопка меню</button>
    <button mat-menu-item>Еще одна кнопка меню</button>
</mat-menu>

<button class="menu-trigger" mat-button #menuTrigger="matMenuTrigger"  [matMenuTriggerFor]="menu">
    Это кнопка тригера
</button>

<button (contextmenu)="menuTrigger.openMenu()">
    Кликни меня правой клавишей
</button>

    我们将一个类添加menu-trigger到触发器本身以将其隐藏在样式中，因为它会在左键单击时打开菜单（我们不需要）：

    // app.component.scss

mat-table {
    .menu-trigger {
        display: none;
    }
}
    • 0

相关问题