Javascript 如何在angular4中使用jquery
我是angular的新手,我正在尝试将Jquery与angular 4结合使用,我在stack over flow和我发现的问题中发现了这一点 但当我尝试实现它时,我得到了以下错误:Javascript 如何在angular4中使用jquery,javascript,jquery,angular,Javascript,Jquery,Angular,我是angular的新手,我正在尝试将Jquery与angular 4结合使用,我在stack over flow和我发现的问题中发现了这一点 但当我尝试实现它时,我得到了以下错误: vendor.bundle.js:51867 ERROR Error: Uncaught (in promise): TypeError: $(...).chosen is not a function TypeError: $(...).chosen is not a function at PocTes
vendor.bundle.js:51867 ERROR Error: Uncaught (in promise): TypeError: $(...).chosen is not a function
TypeError: $(...).chosen is not a function
at PocTestsPage.webpackJsonp.../../../../../src/app/structure/poc-tests/poc-tests.page.ts.PocTestsPage.ngAfterViewInit (main.bundle.js:898)
at callProviderLifecycles (vendor.bundle.js:61944)
at callElementProvidersLifecycles (vendor.bundle.js:61919)
at callLifecycleHooksChildrenFirst (vendor.bundle.js:61903)
at checkAndUpdateView (vendor.bundle.js:62935)
at callWithDebugContext (vendor.bundle.js:63989)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (vendor.bundle.js:63529)
at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (vendor.bundle.js:61001)
at RouterOutlet.webpackJsonp.../../../router/@angular/router.es5.js.RouterOutlet.activateWith (vendor.bundle.js:83416)
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.placeComponentIntoOutlet (vendor.bundle.js:82597)
at PocTestsPage.webpackJsonp.../../../../../src/app/structure/poc-tests/poc-tests.page.ts.PocTestsPage.ngAfterViewInit (main.bundle.js:898)
at callProviderLifecycles (vendor.bundle.js:61944)
at callElementProvidersLifecycles (vendor.bundle.js:61919)
at callLifecycleHooksChildrenFirst (vendor.bundle.js:61903)
at checkAndUpdateView (vendor.bundle.js:62935)
at callWithDebugContext (vendor.bundle.js:63989)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (vendor.bundle.js:63529)
at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (vendor.bundle.js:61001)
at RouterOutlet.webpackJsonp.../../../router/@angular/router.es5.js.RouterOutlet.activateWith (vendor.bundle.js:83416)
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.placeComponentIntoOutlet (vendor.bundle.js:82597)
at resolvePromise (polyfills.bundle.js:3179)
at resolvePromise (polyfills.bundle.js:3150)
at polyfills.bundle.js:3227
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2833)
at Object.onInvokeTask (vendor.bundle.js:54923)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2832)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2600)
at drainMicroTaskQueue (polyfills.bundle.js:2993)
at ZoneTask.invoke (polyfills.bundle.js:2899)
at timer (polyfills.bundle.js:3949)
我正在使用一个名为cleanUI的angular 4库:
我创建了一个名为poc测试的组件,如图所示:
poc tests.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- jQuery and chosen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<ng-chosen>Loading...</ng-chosen>
</body>
</html>
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
declare var $: any;
declare var jQuery: any;
declare var autosize: any;
declare var Ladda: any;
declare var Chartist: any;
@Component({
selector: 'ng-chosen',
template: `<select #selectElem>
<option *ngFor="let item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
</select>
<h4> {{selectedValue}}</h4>`
})
export class PocTestsPage implements AfterViewInit {
@ViewChild('selectElem') el:ElementRef;
items = ['First', 'Second', 'Third'];
selectedValue = 'Second';
ngAfterViewInit() {
$(this.el.nativeElement)
.chosen()
.on('change', (e, args) => {
this.selectedValue = args.selected;
});
}
}
角度2快速入门
System.import('app').catch(函数(err){console.error(err);});
加载。。。
poc测试。第页ts:
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- jQuery and chosen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<ng-chosen>Loading...</ng-chosen>
</body>
</html>
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
declare var $: any;
declare var jQuery: any;
declare var autosize: any;
declare var Ladda: any;
declare var Chartist: any;
@Component({
selector: 'ng-chosen',
template: `<select #selectElem>
<option *ngFor="let item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
</select>
<h4> {{selectedValue}}</h4>`
})
export class PocTestsPage implements AfterViewInit {
@ViewChild('selectElem') el:ElementRef;
items = ['First', 'Second', 'Third'];
selectedValue = 'Second';
ngAfterViewInit() {
$(this.el.nativeElement)
.chosen()
.on('change', (e, args) => {
this.selectedValue = args.selected;
});
}
}
从'@angular/core'导入{AfterViewInit,Component,ElementRef,OnInit,ViewChild};
导入'rxjs/add/operator/map';
导入'rxjs/add/operator/debounceTime';
导入'rxjs/add/operator/distinctUntilChanged';
声明var$:任何;
声明var jQuery:any;
声明var autosize:any;
声明var Ladda:任何;
声明var图表列表:任何;
@组成部分({
选择器:'ng selected',
模板:`
{{item}}选项
{{selectedValue}}`
})
导出类PocTestsPage在AfterViewInit后实现{
@ViewChild('selectElem')el:ElementRef;
项目=[‘第一’、‘第二’、‘第三’];
selectedValue='Second';
ngAfterViewInit(){
$(this.el.nativeElement)
.selected()
.on('change',(e,args)=>{
this.selectedValue=args.selected;
});
}
}
您需要安装@types/jquery并删除所有与jquery相关的
declare var
:
npm install @types/jquery --save
如果您还使用webpack构建静态文件,则需要此插件:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
是否选择了
并安装了?您确定问题出在jQuery上,而不是没有加载selected
吗?您所说的selected是什么意思?为什么要使用jQuery?您的错误明确指出“$(…)。selected”不是函数<选择的代码>是一个jQuery库。它不知怎么被使用了,问题是,你在加载它吗?