Wie Winkel-4 Kontext-Menü

Wie erstellen Sie ein Kontextmenü, in angular 4 ? Leider ist die html-Kontext-Menü funktioniert nicht.

So, ich möchte eine Komponente erstellen und zeigen Sie es auf der rechten klicken Sie auf die cursor-Koordinaten aber wie wollen Sie diese umsetzen?

z.B.

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

könnten Sie bitte erklären, ein wenig mehr oder geben Sie uns weitere Informationen mit einem Beispiel code, wenn möglich bitte
Es gibt viele Möglichkeiten zur Implementierung einer Kontext-Menü in Eckig. Für Sie wahrscheinlich am einfachsten zu verwenden, eine Bibliothek mit Komponenten, wie ngx-Kontext-Menü. Auch, Lesen Sie bitte wie man eine Frage stellen für die Zukunft, als wenn unsere Fähigkeit verbessern, um zu helfen.

InformationsquelleAutor User9132 | 2017-08-15

angular contextmenu

Fand ich alle Ihre Lösungen sind ziemlich kompliziert und schwer zu passen, und da ich gerade begonnen, ich wollte dies lösen, mit Komponenten und eventbinding nur.
Also Mein ContextMenu ist eine Komponente mit Eingabewerten x und y und angezeigt wird, klicken Sie rechts oben auf Ihren ParentComponent 🙂

Also hier ist es:

Eltern.Komponente.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==true">
        <app-contextmenu [x]="contextmenuX" [y]="contextmenuY"></app-contextmenu>
    </div>
</div>

Dies ist der Kontext-Menü selbst:

contextmenu.Komponente.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.Komponente.css

.contextmenu{
    position: absolute;
}

Können Sie nun eigene Animationen, css-styling, etc. wie gewohnt mit einer Komponente.
Hoffe das konnte helfen 🙂 viel Spaß !

Cool! Ich werde tun, ein Kontext-Menü selber zu. Sobald ich damit fertig bin poste ich hier meine Lösung.
Ich habe eigene und auf git-hub-Kontext-Menü ist dynamisch und ausblenden bei Mausklick aus. github.com/ieammac/angular-4-custom-context-menu
Ich hatte auf Termin hinzufügen.PreventDefault() auf, um die onrightClick () - Funktion. Anders beiden Kontext-Menü zeigen würde.

InformationsquelleAutor User9132

6

Können Sie versuchen, ngx-contextmenu Bibliothek. Überprüfen Sie die demo - hier

Wenn du auf eckige version 4 betrachten Sie mit [email protected]

danke!!! das ist sehr interessant, ich habe es installiert und es hat funktioniert,aber wie wollen Sie Stil-Menü? css scheint nicht zu beeinflussen es
wie stylt man das Kontext-Menü prüfen Sie bitte, dieses Problem github.com/isaacplmann/ngx-contextmenu/issues/41
Dies ist für Winkel-6, und nicht die Arbeit mit Winkel-4
Sie können immer versuchen, zu laufen npm show ngx-contextmenu@* version und wählen Sie die alte version der Bibliothek, die mit Ihren eckigen version.
Sie müssen verwenden Sie eine der frühen Versionen, wie Sie targeting-Winkel 4. Wenn Sie das Kontrollkästchen version 1.0.0-Paket.json hat es eckig 4 in seiner peerDependencies und devDependencies

InformationsquelleAutor Kuncevič
0

Den ich erstellt habe ein eigenes Kontext-Menü mit den Komponenten-alle kann man nehmen, eine neue Idee zu können, bauen Ihre eigenen.

hier ist der link

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

InformationsquelleAutor mAc

Gebäude weiter auf die GROßE Lösung von User9132 (siehe oben), können Sie bauen ein Kontextmenü dynamisch. Auf diese Weise können Sie die Wiederverwendung der generischen Kontext-Menü-Komponente.

parent.component.html:
Der rechten Maustaste auf ein Listenelement. Endlich ist es soweit verarbeitet werden dürfen, den ausgewählten Menüpunkt.

<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>

Eltern.Komponente.ts:
Die Muttergesellschaft bestimmt die Menüpunkte und wirkt auf den ausgewählten Menüpunkt. Ich begann positionieren Sie das Kontext-Menü auf dem Bildschirm, damit es nicht fallen aus dem Bildschirm. Vielleicht braucht Verbesserungen - Sie sind willkommen.

@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:
Bei Klick auf einen Menüpunkt, wird es weitergegeben werden, um die Eltern zu behandeln, die Auswahl.

<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.Komponente.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);
    }
}

InformationsquelleAutor tjm1706

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.