如何使用https://angular.io/docs/ts/latest/guide/webpack.html中的vendor.ts [英] How to use vendor.ts from https://angular.io/docs/ts/latest/guide/webpack.html

问题描述

根据 https://angular.io/docs/ts/latest/guide/webpack.html ，您应该能够在vendor.ts文件中添加jquery之类的供应商

According to https://angular.io/docs/ts/latest/guide/webpack.html you should be able to add vendors like jquery in the vendor.ts file

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

到目前为止我做了什么

typings install dt~jquery --global --save
npm install jquery --save

我将这一行添加到vendor.ts

and i added this line to vendor.ts

import 'jquery'

webpack运行没有错误.但是我无法在我的组件中使用jQuery.

webpack run without an error. But I am not able to use jQuery in my Component.

import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'table-widget',
  templateUrl: 'table-widget.component.html'
})

export class TableWidgetComponent implements OnInit {

 constructor(private _elRef: ElementRef) {

 }

 ngOnInit() : void {
   $(this._elRef.nativeElement).find('button').on('click', function() { alert("it works");  });
 }
}

我在这里做什么错了?

推荐答案

您需要将jQuery公开给全局上下文.

You need to expose the jQuery to the global context.

这些选项中的任何一个都可以满足您的需要.

Either of these options will achieve what you need to do.

在您的webpack配置中:

In your webpack config:

plugins: [
    ....  //your other configs
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
]

或使用 expose-loader

module: {
  loaders: [
      { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
  ]
}

这篇关于如何使用https://angular.io/docs/ts/latest/guide/webpack.html中的vendor.ts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！