个人中心
gpt4 book ai didi

javascript - 如何在angular4中使用jquery

转载 作者：行者123 更新时间：2023-11-30 15:14:57 25 4
gpt4 key购买 nike

我是 Angular 的新手，我正在尝试将 Jquery 与 Angular 4 一起使用，我发现 this question 在堆栈溢出和内部我发现的问题this example

但是当我尝试实现它时，出现以下错误:

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-tests 的组件，如图所示:enter image description here

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>

poc-tests.page.ts:

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;
      });
  }
}

最佳答案

您需要安装@types/jquery 并删除所有与jQuery 相关的declare var:

npm install @types/jquery --save

如果您还使用 webpack 构建静态文件，则需要此插件:

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

关于javascript - 如何在angular4中使用jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44609444/

25 4 0
文章推荐： javascript 不能在头部工作但在 body 中工作
文章推荐： javascript - 如何在文本上设置线性渐变？
文章推荐： javascript - ajax 调用后 jQuery 不工作，即使我使用了正确的 on() 方法
文章推荐： C 代码审查 : Where is my mistake trying to solve this simple riddle?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com