web-dev-qa-db-fra.com

Comment Angular 4

Comment créez-vous un menu contextuel dans angular 4? Malheureusement, le menu contextuel html ne fonctionne pas.

Je souhaite donc créer un composant et l'afficher par un clic droit sur les coordonnées du curseur, mais comment le mettre en œuvre?

par exemple.

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

J'ai trouvé toutes vos solutions assez compliquées et difficiles à personnaliser, et depuis que je viens de commencer, je voulais résoudre ce problème uniquement avec des composants et des événements. Donc, Mon ContextMenu est un composant avec les valeurs d’entrée x et y et s’affiche en faisant un clic droit sur son ParentComponent :)

Exemple Stackblitz

Alors la voici:

Parent.component.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>

C'est le menu contextuel lui-même:

contextmenu.component.ts

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

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

  constructor() { }


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

}

contextmenu.component.html

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

contextmenu.component.css

.contextmenu{
    position: absolute;
}

Vous pouvez maintenant appliquer vos propres animations, styles CSS, etc. comme d'habitude avec un composant. J'espère que cela pourrait aider :) amusez-vous!

31
User9132

Vous pouvez essayer ngx-contextmen library. Vérifiez la démo ici

Si vous êtes sur angular version 4, utilisez [email protected]

7
Kuncevič

En poursuivant sur la GRANDE solution de ser9132 (voir ci-dessus), vous pouvez créer un menu contextuel de manière dynamique. De cette façon, vous pouvez réutiliser le composant de menu contextuel générique.

parent.component.html: Cliquez avec le bouton droit de la souris sur un élément de la liste. Enfin, il est autorisé de gérer l'élément de menu sélectionné.

<div class="row mt-3 ml-1">
  <div class="col-11 col-sm-11 col-md-10" (click)="disableContextMenu()" oncontextmenu="return false;">
    <div class="geocache-list-height">
      <table id="geocaches-list" class="table">
        <tbody>
        <tr *ngFor="let geocache of mygeocaches" class="d-flex">
          ...
          <td class="col-1" (contextmenu)="onrightClick($event, geocache)"><i class="icon-Ellipsis-vert"></i></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<!--you have to write this only once in your component-->
<div *ngIf="contextmenu==true">
  <app-contextmenu [x]="contextmenuX" [y]="contextmenuY" [menuitems]="showMenuOptions()" (menuItemSelected)="handleMenuSelection($event)"></app-contextmenu>
</div>

parent.component.ts: Le parent détermine les éléments de menu et agit sur l'élément de menu sélectionné. J'ai commencé à positionner le menu contextuel sur l'écran pour qu'il ne tombe pas de l'écran. Peut-être que cela nécessite des améliorations - de rien.

@Component({
    selector: 'app-geocache-list',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
    errorMessage = '';

    contextmenu = false;
    contextmenuX = 0;
    contextmenuY = 0;
    contextMenuForGeocache: MyGeocache;
    innerWidth: any;
    innerHeight: any;

    constructor(...) { }

    ngOnInit() {
        // for determining where the put the context menu -- on the screen ;-) 
        this.innerWidth = window.innerWidth;
        this.innerHeight = window.innerHeight;
        ...
        }
    }

    showMenuOptions() {
        return 'Delete;Navigate;Edit;';
    }
    onrightClick(event, geocache: MyGeocache ) {
        this.contextmenuX = event.clientX - 100;
        this.contextmenuY = event.clientY;
        this.contextmenu = true;
        const menuHeight = this.showMenuOptions().split(';').length;
        const maxY = this.innerHeight - ( menuHeight * 30);
        if ( this.contextmenuY > maxY ) {
            this.contextmenuY = maxY;
        }
    }
    // disables the menu
    disableContextMenu() {
        this.contextmenu = false;
    }

    handleMenuSelection( menuselection: string) {
        if ( menuselection === 'Delete') {
            ...
        } else if ( menuselection === 'Navigate') {
            ...
        }
    }
}

contextmenu.component.html: Après avoir cliqué sur un élément de menu, il sera propagé au parent pour gérer la sélection.

<div class="contextmenu" [ngStyle]="{'left.px': x, 'top.px': y}">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let menuItem of theMenuItems">
      <span (click)="outputSelectedMenuItem( menuItem)">{{ menuItem }}</span>
    </li>
  </ul>
</div>

contextmenu.component.ts:

@Component({
    selector: 'app-contextmenu',
    templateUrl: './contextmenu.component.html',
    styleUrls: ['./contextmenu.component.css']
})
export class ContextmenuComponent implements OnInit {
    constructor() { }
    @Input() x = 0;
    @Input() y = 0;
    @Input() menuitems = '';
    theMenuItems = [];
    @Output() menuItemSelected = new EventEmitter();

    ngOnInit() {
        // Build the menu items
        this.theMenuItems = this.menuitems.split(';');
    }

    outputSelectedMenuItem( menuitem: string) {
        this.menuItemSelected.emit(menuitem);
    }
}
0
tm1701

J'ai créé un menu contextuel personnalisé avec des composants où chacun peut prendre une idée et créer sa propre idée.

voici le lien

https://github.com/ieammac/angular-4-custom-context-men

0
mAc