จะใช้ jQuery Plugin กับ Angular 4 ได้อย่างไร?

ฉันต้องการใช้แถบเลื่อนช่วงในโครงการเชิงมุมและฉันลองใช้โมดูลที่มีอยู่หนึ่งโมดูลสำหรับเชิงมุม 4

มันใช้งานได้ดีในระหว่างการคอมไพล์ แต่เมื่อฉันพยายามสร้างเพื่อปรับใช้มันแสดงข้อผิดพลาดด้านล่าง

ฉันตรวจสอบตัวเลือกในการใช้ปลั๊กอิน jQuery โดยตรงในโครงการเชิงมุมและฉันได้รับตัวเลือกสำหรับทำใน Angular 2 เท่านั้น

มีวิธีใดบ้างที่เราสามารถใช้ปลั๊กอิน jQuery ใน Angular 4 ได้?

กรุณาแจ้งให้เราทราบ

ขอบคุณล่วงหน้า!

ใช่คุณสามารถใช้ jquery กับ Angular 4 ได้

ขั้นตอน:

1) index.htmlใส่บรรทัดด้านล่างในแท็ก

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2) ในไฟล์ component ts ด้านล่างคุณต้องประกาศ var เช่นนี้

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

และใช้รหัสนี้สำหรับไฟล์ html ที่เกี่ยวข้องดังนี้:

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

วิธีนี้จะได้ผลสำหรับคุณ ขอบคุณ

ติดตั้ง jquery ด้วย npm

npm install jquery --save

เพิ่มการพิมพ์

npm install --save-dev @types/jquery

เพิ่มสคริปต์ลงใน angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

สร้างโครงการและให้บริการ

ng build

หวังว่านี่จะช่วยได้! สนุกกับการเขียนโค้ด

ติดตั้ง jQuery โดยใช้ NPM Jquery NPM

npm install jquery

ติดตั้งไฟล์ประกาศ jQuery

npm install -D @types/jquery

นำเข้า jQuery ภายใน. ts

import * as $ from 'jquery';

โทรภายในชั้นเรียน

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

คุณไม่จำเป็นต้องประกาศตัวแปร jQuery ใด ๆ เมื่อคุณติดตั้ง @ types / jquery

declare var jquery:any;   // not required
declare var $ :any;   // not required

คุณควรเข้าถึง jQuery ได้ทุกที่

สิ่งต่อไปนี้ควรใช้งานได้:

jQuery('.title').slideToggle();

คุณไม่ควรใช้ jQuery ใน Angular แม้ว่าจะเป็นไปได้ (ดูคำตอบอื่น ๆ สำหรับคำถามนี้) แต่ก็ท้อใจ ทำไม?

Angular มีการเป็นตัวแทนของ DOM ในหน่วยความจำของตัวเองและไม่ใช้ตัวเลือกแบบสอบถาม (ฟังก์ชั่นเช่นdocument.getElementById(id)) เช่น jQuery แต่การจัดการ DOM ทั้งหมดจะทำโดย Renderer2 (และ Angular-directives เช่น * ngFor และ * ngIf เข้าถึง Renderer2 นั้นในพื้นหลัง / framework-code) หากคุณจัดการ DOM ด้วย jQuery ด้วยตัวคุณเองไม่ช้าก็เร็ว ...

1. พบปัญหาการซิงโครไนซ์และมีสิ่งผิดปกติปรากฏขึ้นหรือไม่หายไปในเวลาที่เหมาะสมจากหน้าจอของคุณ
2. มีปัญหาด้านประสิทธิภาพในส่วนประกอบที่ซับซ้อนมากขึ้นเนื่องจากการแสดง DOM ภายในของ Angular ถูกผูกไว้กับ zone.js และกลไกการตรวจจับการเปลี่ยนแปลงดังนั้นการอัปเดต DOM ด้วยตนเองจะบล็อกเธรดที่แอปของคุณทำงานอยู่เสมอ
3. มีข้อผิดพลาดที่น่าสับสนอื่น ๆ ที่คุณไม่ทราบที่มาของ
4. ไม่สามารถทดสอบแอปพลิเคชันได้อย่างถูกต้อง (จัสมินต้องการให้คุณทราบเมื่อแสดงผลองค์ประกอบแล้ว)
5. ไม่สามารถใช้ Angular Universal หรือ WebWorkers ได้

หากคุณต้องการรวม jQuery จริงๆ (สำหรับการแตะต้นแบบบางอย่างที่คุณจะทิ้ง 100% อย่างแน่นอน) ฉันขอแนะนำให้รวมไว้ใน package.json ของคุณด้วยnpm install --save jqueryแทนที่จะรับจาก CDN ของ Google

TLDR: สำหรับการเรียนรู้วิธีจัดการ DOM ในแบบเชิงมุมโปรดอ่านบทแนะนำการทัวร์ฮีโร่อย่างเป็นทางการก่อน: https://angular.io/tutorial/toh-pt2หากคุณต้องการเข้าถึงองค์ประกอบที่สูงขึ้นในลำดับชั้น DOM (ผู้ปกครองหรือdocument body) หรือด้วยเหตุผลอื่น ๆ บางคำสั่งที่ชอบ*ngIf, *ngForคำสั่งที่กำหนดเอง, ท่อและระบบสาธารณูปโภคอื่น ๆ เช่นเชิงมุม[style.background], [class.myOwnCustomClass] ไม่ตอบสนองความต้องการของคุณใช้ Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2 ตัวอย่าง

ลองสิ่งนี้:

import * as $ from 'jquery/dist/jquery.min.js';

หรือเพิ่มสคริปต์ลงใน angular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ]

และในไฟล์. ts ของคุณ:

declare var $: any;

คุณสามารถอัปเดตเวอร์ชันการพิมพ์ jquery ของคุณได้เช่นนั้น

npm install --save @types/jquery@latest

ฉันมีข้อผิดพลาดเดียวกันนี้และฉันใช้เวลา 5 วันในการท่องเน็ตเพื่อหาวิธีแก้ปัญหามันใช้ได้ผลสำหรับฉันและมันควรจะใช้ได้สำหรับคุณ

หากคุณมีความจำเป็นต้องใช้ไลบรารีอื่น ๆ ในโปรเจ็กต์ --typescript - ไม่ใช่แค่ในโปรเจ็กต์ - มุมมอง - คุณสามารถค้นหา tds (ไฟล์ประกาศ TypeScript) ที่มีการเปรียบเทียบและมีข้อมูลของวิธีการประเภทฟังก์ชัน ฯลฯ ซึ่ง TypeScript สามารถใช้ได้โดยปกติแล้วไม่จำเป็นต้องนำเข้า ประกาศว่า var เป็นทรัพยากรสุดท้าย

npm install @types/lib-name --save-dev

คุณสามารถใช้ webpack เพื่อจัดหาได้ จากนั้นจะถูกฉีด DOM โดยอัตโนมัติ

module.exports = {
  context: process.cwd(),
  entry: {
    something: [
      path.join(root, 'src/something.ts')
    ],
    vendor: ['jquery']
  },
  devtool: 'source-map',
  output: {
    path: path.join(root, '/dist/js'),
    sourceMapFilename: "[name].js.map",
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'}
    ]
  },
  resolve: {
    extensions: ['.ts', '.es6', '.js', '.json']
  },
  plugins: [

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

  ]
};

ลองใช้ - ประกาศ let $: any;

หรือนำเข้า * เป็น $ จาก 'jquery / dist / jquery.min.js'; ระบุเส้นทางที่แน่นอนของ lib

การแก้ปัญหา typescript:

ขั้นตอนที่ 1:

npm install jquery

npm install --save-dev @types/jquery

ขั้นตอนที่ 2:ใน Angular.json เพิ่ม:

"scripts": [
        "node_modules/jquery/dist/jquery.min.js",
      ]

หรือใน index.html เพิ่ม:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

ขั้นตอนที่ 3:ใน * .component.ts ที่คุณต้องการใช้ jquery

import * as $ from 'jquery';  // dont need "declare let $"

จากนั้นคุณสามารถใช้ jquery เหมือนกับ javaScript ด้วยวิธีนี้ VScode สนับสนุนคำแนะนำอัตโนมัติโดย typescript

ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}