jQuery metisMenu funktioniert nicht mit * ngIf

Question

Wir verwenden das MetisMenu mit Angular2, wir haben eine * ngIf auf einem der Listenelemente und dieser Wert wird abhängig davon geändert, ob ein Datensatz ausgewählt ist. Wenn es dann ist, zeigt das li zusätzliche Optionen an.

Das Problem ist, wenn es sichtbar ist, funktioniert es nicht und das Klicken auf diesen Menüeintrag lädt die Seite neu, wenn es immer sichtbar ist, dann funktioniert es gut. Ich nehme an, das Problem ist, dass die ngIf es vollständig aus dem DOM entfernt und nicht nur Sichtbarkeit, so dass es nicht da ist, wenn wir das MetisMenu initialisieren. Ich habe versucht, das MetisMenu neu zu initialisieren, aber das scheint nicht zu funktionieren.

Gibt es eine Möglichkeit, das metisMenu und * ngIf auf den li-Elementen zu verwenden?

Answer 1

Versuchen Sie, Ihren Reinitialisierungscode in eine setTimeout einzupacken.

setTimeout(() => { jQuery('#elem').metisMenu(); }, 0); 

Was Sie auch auf Ihre Artikel zu tun ist, könnte eine Richtlinie machen, die metisMenu Optionen als @Input nimmt, dann diese Richtlinie anwenden, die ngIf * haben. Zeigen Sie uns den Code für weitere Hinweise.

Zum Beispiel:

import { Directive, AfterViewInit, Input, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[appMetisMenu]' 
}) 
export class MetisMenuDirective implements AfterViewInit { 

    @Input() options: {} = {}; 

    constructor(public el: ElementRef) {} 

    ngAfterViewInit(): void { 
     jQuery(this.el.nativeElement).metisMenu(this.options); 
    } 
} 

Answer 2

sollten Sie in der Lage sein *ngIf="isVisible" zu entfernen und [style.visibility]="isVisible ? 'visible' : 'hidden'" stattdessen verwenden. Dies verhindert, dass Ihre Elemente aus dem DOM entfernt werden. Es kann jedoch zu Nebenwirkungen kommen, wenn das Menü über last-of-type oder ähnliche CSS-Selektoren gestylt wird.

Abgesehen davon, eckig und jQuery gehen wirklich nicht zusammen. Sie sollten versuchen, jQuery so schnell wie möglich loszuwerden. Es hat nichts zu bieten, kantig nicht.