Question

我正在尝试在我的Angular 2 app中添加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

我如何解决它。

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

的index.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'
      }),

       .................
       .................
    ]

Answer 1

试试这个

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

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

1 个答案: