Question

我使用'jhipster'创建了项目，它是Angular 4项目。它使用Webpack和'yarn'。我为我的要求安装了metisMenu，它位于package.json文件中。我在metisMenu和'webpack'中定义了vendor.ts，但它显示错误jQuery(...).metisMenu is not a function。

我第一次使用Webpack。在Webpack中定义它的确切方法是什么？

Answer 1

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

Answer 2

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

import 'metismenu';
...

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

希望这有帮助

Answer 3

如果使用角度> 2的角度cli>＆gt; 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等待＆＃34; dom ready＆＃34;事件。最后，你有一个像这样的组件：

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对象会被全局的新实例替换

享受：）

使用angular在Webpack中定义metisMenu

3 个答案: