$ 未在 Angular 2 中使用 JQuery 定义答案

【问题标题】：$ is not defined using JQuery in Angular 2$ 未在 Angular 2 中使用 JQuery 定义
【发布时间】：2017-03-23 20:20:45
【问题描述】：

全部我正在使用 Angular 2 制作一个小型 Web 应用程序，我想在其中使用 JQuery。我在chrome中遇到错误我不知道为什么这是错误：

   core.umd.js:3004 EXCEPTION: Uncaught (in promise): Error: Error in `enter code here`http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: $ is not defined
ReferenceError: $ is not defined
    at DashboardComponent.ngOnInit (http://localhost:3000/app/dashboard.component.js:22:9)
    at Wrapper_DashboardComponent.detectChangesInInputProps (/AppModule/DashboardComponent/wrapper.ngfactory.js:18:53)
    at _View_DashboardComponent_Host0.detectChangesInternal (/AppModule/DashboardComponent/host.ngfactory.js:30:32)
    at _View_DashboardComponent_Host0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
    at _View_DashboardComponent_Host0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7398:24)
    at RouterOutlet.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3458:46)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2955:20)
    at ActivateRoutes.activateRoutes (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2933:26)
    at eval (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23)

这是我的代码：

import { Component, ElementRef, OnInit } from '@angular/core';
declare var $:JQueryStatic;
@Component({
    moduleId: module.id,
    selector: 'my-dashboard',
    templateUrl: 'dashboard.component.html',
    styleUrls: ['dashboard.component.css'],
})
export class DashboardComponent implements OnInit{

    constructor(private elRef: ElementRef){}

    ngOnInit():any{
        $(this.elRef.nativeElement).find('button').on('click', function() {
           alert('It works!');
        });
    }
}

我使用此答案安装 jquery 并按照说明进行了所有操作，但不起作用。 link 任何想法为什么？谢谢

修复我通过将 declare var $:JQueryStatic; 更改为 declare var $:any; 来修复它并将<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 包含在index.html 中

【问题讨论】：

你试过类似import $ from 'jquery';吗？
@DanielD 我刚才做了，上面写着Module "jquery" has no default export.
查看这篇文章：stackoverflow.com/questions/35223977/…
这取决于您使用的打字稿版本。我认为他们已经不再需要打字了。您的问题可能与您链接的其他问题类似，但答案取决于您的技术版本。

标签： javascript jquery angular

【解决方案1】：

使用layout.cshtml上的cdn

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>

【讨论】：

【解决方案2】：

请检查jquery.js是否实际使用chrome开发者工具加载。如果没有，那么您的模块加载器配置中缺少依赖项。

您必须确保所选的模块加载器知道 jquery.js 依赖项。

【讨论】：

好的，我在package.jason 中有它，声明为"jquery": "^3.1.1" 我应该以某种方式安装它吗？
@JakubBadacz 你从哪里开始的？你能分享你的代码吗？很难猜出你的实际设置；）
没关系，我想通了:)
您基本上通过选择的模块加载器手动完成了我希望您执行的操作:) 很高兴它对您有用，但我强烈建议您也搜索模块加载器解决方案。一旦您添加更多依赖项并最终进入更复杂的 sec 场景，它将对您有所帮助