angular contextmenu自定义

要自定义 Angular ContextMenu，你可以使用 Angular CDK 中的 `MatMenu` 组件。以下是步骤：

1. 首先，你需要在你的组件模板中添加一个 `div` 元素，并声明 `matMenuTriggerFor` 指令，这将告诉 Angular 当用户右键单击此元素时，应该打开 `MatMenu` 组件。

<div [matMenuTriggerFor]="myMenu">
  Right click me!
</div>

<mat-menu #myMenu="matMenu">
  <!-- custom menu content here -->
</mat-menu>

2. 然后，你需要为 `MatMenu` 组件添加自定义内容。你可以在 `<mat-menu>` 元素内部添加任何 HTML 元素或组件，并使用 `mat-menu-item` 指令将其标记为菜单项。

<mat-menu #myMenu="matMenu">
  <button mat-menu-item (click)="doSomething()">Menu Item 1</button>
  <button mat-menu-item (click)="doSomethingElse()">Menu Item 2</button>
  <div mat-menu-item>
    <p>Custom HTML content</p>
  </div>
</mat-menu>

3. 最后，你需要在组件类中实现 `doSomething()` 和 `doSomethingElse()` 方法。这些方法将在用户单击菜单项时执行。

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  doSomething() {
    console.log('Menu item 1 clicked');
  }

  doSomethingElse() {
    console.log('Menu item 2 clicked');
  }
}

这样，你的自定义 Angular ContextMenu 就完成了。