如何在Angular 2组件中使用jQuery插件？

我想在我的Angular 2应用程序的主页上使用名为Vegas的背景图像滑块插件。 jQuery插件已经通过npm安装在/ node_module目录下。如何在Angular 2组件中使用jQuery插件？

这是我的主页组件：

import { Component, OnInit, ElementRef } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { Title } from '@angular/platform-browser'; 
import $ from 'jquery'; 
import 'vegas'; 

@Component({ 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    constructor(private el: ElementRef, router:Router, title:Title) { 
     router.events.subscribe((url)=>{ 
      title.setTitle('Home Page'); 
     }); 
    } 

    ngOnInit() { 
     $('body').vegas({ 
      slides: [ 
       { src: "../../img/home/1.jpg" }, 
       { src: "../../img/home/2.jpg" }, 
       { src: "../../img/home/3.jpg" }, 
       { src: "../../img/home/4.jpg" } 
      ] 
     }); 
    } 
}

我得到这个错误：

Uncaught (in promise): Error: Error in :0:0 caused by: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).vegas is not a function...

似乎并没有加载的插件文件。我如何正确加载和使用jQuery插件？

来源

2017-04-19 Leo Tse

你要从哪里进口'拉斯加'？你不需要指定？ –

@DarrenSweeney我是Angular 2的新手。当我在npm安装之后导入'vegas'时，它不会加载所有东西吗？或者我应该导入JavaScript文件的整个路径？像这样：'import'../../ node_modules/vegas/dist/vegas.js';'？ –

我对Angular不熟悉，但规范是告诉模块从哪里导入 - 路径 –

你应该给这样的路径。

Import 'vegas' from 'vegas/dist/vegas';

来源

2017-04-19 16:30:36 RemyaJ

如何在Angular 2组件中使用jQuery插件？

回答

相关问题