angular - 如何使用 Angular 4 上下文菜单

Question

如何在 angular 4 中创建上下文菜单？不幸的是，html 上下文菜单不起作用。

所以我想创建一个组件并在光标坐标处右键单击时显示它，但是如何实现呢？

例如

<ul>
    <li (click)="showContextMenuComponent">example</li>
</ul

Answer 1

我发现你们所有的解决方案都非常复杂且难以定制，而且因为我刚开始，所以我只想用组件和事件绑定(bind)来解决这个问题。所以我的 ContextMenu 是一个具有输入值 x 和 y 的组件，并在其 ParentComponent 顶部右键单击时显示 :)

Stackblitz Example

这里是:

父组件.ts

 export class parentComponent {
      contextmenu = false;
      contextmenuX = 0;
      contextmenuY = 0;

      //activates the menu with the coordinates
      onrightClick(event){
          this.contextmenuX=event.clientX
          this.contextmenuY=event.clientY
          this.contextmenu=true;
      }
      //disables the menu
      disableContextMenu(){
         this.contextmenu= false;
      }

parent.component.html

<!-- your whole html is wrapped in a div so anywhere you click you disable contextmenu,
also the div is responsible for suppressing the default browser contextmenu -->
<div (click)="disableContextMenu()" oncontextmenu="return false;">
    <!-- this is the usage -->
    <ul>
        <li (contextmenu)="onrightClick($event)">right click me!</li>
    </ul>

    <!--you have to write this only once in your component-->
    <div *ngIf="contextmenu">
        <app-contextmenu [x]="contextmenuX" [y]="contextmenuY"></app-contextmenu>
    </div>
</div>

这是上下文菜单本身:

上下文菜单.component.ts

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

@Component({
  selector: 'app-contextmenu',
})
export class ContextmenuComponent{

  constructor() { }


  @Input() x=0;
  @Input() y=0;

}

上下文菜单.component.html

<div class="contextmenu" [ngStyle]="{'left.px': x, 'top.px': y}">
  this is your contextmenu content
</div>

上下文菜单.component.css

.contextmenu{
    position: absolute;
}

您现在可以像往常一样对组件应用您自己的动画、CSS 样式等。希望这会有所帮助 :) 玩得开心!