在Angular 4应用程序中使用JQuery插件 [英] Using JQuery Plugins in Angular 4 Applications

问题描述

所以我目前正在尝试在我的Angular 4应用程序中使用一些jquery插件，如Magnific-Popup等，但我遇到了一些麻烦。我通过在我的终端中执行 npm install --save-dev @ types / jquery 安装了jquery，并且工作正常，但是我无法让实际的插件工作。这是我最初尝试过的，

So I am currently trying to use some jquery plugins like Magnific-Popup etc in my Angular 4 application but I'm having some trouble. I installed jquery by doing npm install --save-dev @types/jquery in my terminal and that worked fine, but I'm having trouble getting the actual plugins to work. This is what I tried initially,

 @Component({
 selector: 'app-showcase',
 templateUrl: './showcase.component.html',
 styleUrls: ['./showcase.component.css']
 })
 export class ShowcaseComponent implements OnInit {
 @ViewChild("elementRef") elref2: ElementRef;

 constructor(private elRef: ElementRef) { }

 ngOnInit() {


  jQuery(this.elref2.nativeElement).magnificPopup();

  }

 ngAfterViewInit() {

  }

为了让typescript能够识别magnificPopup（）函数，我尝试将magnificPopup文档中的脚本导入到我的index.html（body标签的底部），但是我可以说这不起作用。 Webstorm说无法解析文件jquery.magnific-popup.js。我也正在加载jquery.min脚本，这似乎工作正常。

In order to get typescript to recognize the magnificPopup() function, I tried importing the scripts from the magnificPopup documentation into my index.html (at the bottom of the body tag), but as far as I can tell that is not working. Webstorm says "can not resolve file jquery.magnific-popup.js". I'm also loading the jquery.min script as well, and that seems to work fine.

我也试过运行npm-install magnific-popup，但也失败了。另外，我尝试将该脚本添加到angular.JSON文件中但无济于事。

I also tried running npm-install magnific-popup, but that also failed. Additionally, I tried adding the script into the angular.JSON file but to no avail.

我想我要问的是，我该怎么做以及如何去做在我的angular 4应用程序中安装和使用第三方jquery插件，如magnific-pop？

I guess what I'm asking is, what is and how can I go about installing and using a third-party jquery plugin like magnific-pop up into my angular 4 application?

谢谢，任何帮助表示赞赏。

Thanks, any help is appreciated.

推荐答案

我有一个Angular项目，我需要使用（现在）一个jquery依赖插件（nanoscroller）。我使用angular-cli来完成我的所有构建过程，我的angular-cli.json文件在scripts属性下有以下内容：

I have an Angular project where I need to use (for now) a jquery dependent plugin (nanoscroller). I use angular-cli to do all my build processes and my angular-cli.json file has the following under the "scripts" property:

 "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js"
      ]

然后我按如下方式使用插件：

Then I use the plugin as follows:

import { AfterViewInit, Component, ElementRef, OnDestroy, Renderer, ViewChild } from "@angular/core";

declare var jQuery: any;

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
    layoutMenuScroller: HTMLDivElement;
    @ViewChild("layoutMenuScroller") layoutMenuScrollerViewChild: ElementRef;

    constructor() {

    }

    ngAfterViewInit() {
         this.layoutMenuScroller = <HTMLDivElement>this.layoutMenuScrollerViewChild.nativeElement;
        jQuery(this.layoutMenuScroller).nanoScroller({ flash: true });

    }
    //  etc..
}

也许你可以采用这个来你的用例。

Perhaps you can adopt this to your use-case.

这篇关于在Angular 4应用程序中使用JQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！