Angular 2 属性'jQuery'在窗口类型上不存在

我正在尝试在我的 Angular 2 应用程序中添加 jQuery 插件。所以当我宣布这个

declare var jQuery:any = window.jQuery;

它通过以下错误：

[default] /home/rahul/Documents/codebase/dcn_web/src/app/pages/reports/component/queryBuilder/queryBuilder.component.ts:12:24 
    Initializers are not allowed in ambient contexts.
[default] /home/rahul/Documents/codebase/dcn_web/src/app/pages/reports/component/queryBuilder/queryBuilder.component.ts:12:33 
    Property 'jQuery' does not exist on type 'Window'.
[default] Checking finished with 2 errors

我如何解决它。

组件.ts

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

declare var jQuery:any = window.jQuery;
@Component({
  selector: 'query-builder',
  template: require('./queryBuilder.html'),
  styles: [require('./queryBuilder.scss')],
})
export class QueryBuilder extends OnInit {

  constructor(private _elRef: ElementRef) {
  }
  ngOnInit() {
    jQuery(this._elRef.nativeElement).find('button').on('click', function () {
      alert("its works");
    });
  }
}

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%= webpackConfig.metadata.title %></title>
  <meta name="description" content="<%= webpackConfig.metadata.description %>">
  <% if (webpackConfig.htmlElements.headTags) { %>
  <!-- Configured Head Tags  -->
  <%= webpackConfig.htmlElements.headTags %>
  <% } %>
  <!-- base url -->
  <base href="<%= webpackConfig.metadata.baseUrl %>">
</head>
<body>
<app>
</app>
<div id="preloader">
  <div></div>
</div>
<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
<link
  href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic'
  rel='stylesheet' type='text/css'>
 <!--jspdf pdf libraries  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.16/jspdf.plugin.autotable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
 <!--jQuery querybuilder plugin -->
<script src="https://cdn.jsdelivr.net/jquery.query-builder/2.4.1/js/query-builder.standalone.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.query-builder/2.4.1/css/query-builder.default.min.css">
</body>
</html>

webapck.common.js

/*
     * Add additional plugins to the compiler.
     *
     * See: http://webpack.github.io/docs/configuration.html#plugins
     */
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
      }),
       .................
       .................
    ]

您可以使用 webpack 插件在全局范围内加载 jquery 对象：

new webpack.ProvidePlugin({
  jQuery: 'jquery',
  $: 'jquery'
})

所以你不需要从窗口声明jQuery。只需声明 jQuery 是any类型。

declare var jQuery:any;

试试这个

(<any>window).jQuery = require('jquery');

相关内容

最新更新

热门标签：