$未在Angular 2中使用JQuery定义

全部我正在制作一个使用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 任何想法为什么？感谢

FIX 我固定它通过改变declare var $:JQueryStatic;到declare var $:any; 并列入<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>到index.html

来源

2016-11-09 Jakub Badacz

您是否尝试过类似的 'jQuery的''进口$;'？ –

@DanielD我刚刚做了，它说'模块“jquery”没有默认导出。“＃： –

Check out this post：http://stackoverflow.com/questions/35223977/jspm-jquery-typescript-module-jquery- has-no-default-export –

-1

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

您必须确保jquery.js依赖关系对选定的模块加载器是已知的。

来源

2016-11-09 22:23:11 wzr1337

好的，我在'package.jason'声明为''jquery“：”^ 3.1.1“'我应该以某种方式安装吗？ –

@JakubBadacz你从哪里开始？你能分享你的代码吗？很难猜测你的实际设置;） – wzr1337

它没关系，我想通了:) –

使用CDN上layout.cshtml

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

来源

2017-04-14 11:11:39 pushp

$未在Angular 2中使用JQuery定义

回答

相关问题