Question

我们正在使用带有Angular2的metisMenu，我们在其中一个列表项上有一个* ngIf，并且根据是否选择了一个记录来更改该值。如果是，则显示li提供其他选项。

问题是，当它可见时它不起作用并点击该菜单项重新加载页面，如果它始终可见，那么它工作正常。我假设问题是ngIf完全从DOM中删除它而不仅仅是可见性，所以当我们初始化metisMenu时它不存在。我尝试重新初始化metisMenu，但这似乎没有用。

有没有办法在li项上使用metisMenu和* ngIf？

Answer 1

您应该可以删除*ngIf="isVisible"并使用[style.visibility]="isVisible ? 'visible' : 'hidden'"代替。这将阻止您的元素从DOM中删除。当菜单通过last-of-type或类似的CSS选择器设置样式时，可能会有副作用。

除此之外，angular和jQuery真的不会在一起。你应该尽快摆脱jQuery。没有提供角度的东西。

Answer 2

尝试将重新初始化代码包装在setTimeout。

中

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

您还可以做一个将metisMenu选项作为@Input的指令，然后将此指令应用于具有* 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);
    }
}

jQuery metisMenu不使用* ngIf

2 个答案: