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

Question

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

这是我的主页组件：

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" }
            ]
        });
    }
}

我遇到了这个错误：

未捕获（承诺中）：错误：错误：0:0 由以下原因引起： __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).vegas 不是函数...

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

Answer 1

你应该给出这样的路径。

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