如何在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插件？

回答

相關問題