使用 Angular 在 Webpack 中定义 metisMenu

Posted 2023-02-16

【中文标题】使用 Angular 在 Webpack 中定义 metisMenu

【英文标题】：Define metisMenu in Webpack using angular

【发布时间】：2017-09-25 11:28:55

【问题描述】：

我使用“jhipster”创建了项目，它是Angular 4 项目。它使用Webpack 和“纱线”。我为我的要求安装了metisMenu，它在package.json 文件中。我在vendor.ts 和'webpack' 中定义了metisMenu，但它显示错误jQuery(...).metisMenu is not a function。 我是第一次使用Webpack。在Webpack 中定义它的确切方法是什么？

【问题讨论】：

嗨，你能分享一个工作代码示例吗？我实际上正在努力实现同样的目标。 ta

@SkorunkaFrantišek，是的。我很快就会和你分享代码。

【参考方案1】：

我直接在所需的Component 中导入了metisMenu，它解决了我的问题。

【参考方案2】：

感谢 Jeeten Parmar，我能够在我引用它的组件中使用以下代码解决此问题：

import 'metismenu';
...

// you can call this inside ngAfterViewInit() in your component
jQuery('#side-menu').metisMenu();

希望对你有帮助

【参考方案3】：

如果你使用 angular cli 和 angular >2 -> 4，你可以像这样在 .angular-cli.json 中声明：

 "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/metismenu/dist/metisMenu.js"
        [... others jquery plugin ...]
],

在你的组件中，你像这样声明 jquery：

declare let $: any;

您必须使用 ngAfterViewInit 来等待“dom 就绪”事件。最后，你有一个这样的组件：

import Component, ElementRef, AfterViewInit from '@angular/core';

declare let $: any;

@Component( 
    [...]
    ngAfterViewInit() 
         this.menuElement = this._elementRef.nativeElement.querySelector('#side-menu');
         (<any>$(this.menuElement)).metisMenu();
    

小心，如果你像这样导入 jquery：

import * as $ from 'jquery';

$ 是 jquery 的一个新实例，因此 MetisMenu 将不会在内部实现，jquery 对象将被全局中的新实例替换

享受:)

【讨论】：

你在最后一行打错了：remplaced。