使用 Angular 在 Webpack 中定义 metisMenu答案

【问题标题】：Define metisMenu in Webpack using angular使用 Angular 在 Webpack 中定义 metisMenu
【发布时间】：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，是的。我很快就会和你分享代码。

标签： angular webpack jhipster yarnpkg

【解决方案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。