jQuery metisMenuが* ngIfと連携していません

Question

metisMenuをAngular2で使用していますが、リスト項目の1つに* ngIfがあり、その値はレコードが選択されているかどうかによって変わります。そうであれば、liに追加オプションが表示されます。

問題が表示されていて、そのメニュー項目をクリックするとページがリロードされ、常に表示されていればうまくいきます。問題は、ngIfが可視性だけでなくDOMから完全に削除されるため、metisMenuを初期化するときにそこには存在しないということです。私はmetisMenuを再初期化しようとしましたが、それは動作していないようです。

li項目にmetisMenuと* ngIfを使用する方法はありますか？

Answer 1

setTimeoutに再初期化コードをラップしてみてください。

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

何も行うことができますことは、@InputとしてmetisMenuオプションを取るディレクティブを行い、その後ngIfを*しているアイテムにこのディレクティブを適用しています。さらなるアドバイスのためのコードを私たちに示してください。例えば

：

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

あなたは*ngIf="isVisible"を削除し、代わりに[style.visibility]="isVisible ? 'visible' : 'hidden'"を使用することができるはずです。これにより、要素がDOMから削除されなくなります。メニューがlast-of-typeまたは同様のCSSセレクタを介してスタイルされているときに副作用が発生する可能性があります。

これとは別に、角度とjQueryは本当に一緒に行かないのです。できるだけ早くjQueryを削除するようにしてください。それは角度を提供するものは何もありません。