Cách sử dụng jQuery Plugin với Angular 4?

Tôi muốn sử dụng thanh trượt phạm vi trong một dự án góc cạnh và tôi đã thử sử dụng một mô-đun có sẵn cho góc 4.

Nó hoạt động tốt trong quá trình biên dịch nhưng khi tôi cố gắng xây dựng nó để triển khai, nó phát ra lỗi bên dưới.

Tôi đã kiểm tra tùy chọn sử dụng plugin jQuery trực tiếp trong dự án góc và tôi chỉ nhận được tùy chọn để thực hiện nó trong Angular 2.

Có cách nào chúng ta có thể sử dụng các plugin jQuery trong Angular 4 không?

Làm ơn cho tôi biết.

Cảm ơn trước!

Có, bạn có thể sử dụng jquery với Angular 4

Các bước:

1) Trong index.htmlthẻ dòng bên dưới.

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

2) Trong tệp component ts bên dưới, bạn phải khai báo var như thế này

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

}

Và sử dụng mã này cho tệp html tương ứng như sau:

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

Điều này sẽ làm việc cho bạn. Cảm ơn

Cài đặt jquery với npm

npm install jquery --save

Thêm kiểu chữ

npm install --save-dev @types/jquery

Thêm tập lệnh vào angle-cli.json

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

Xây dựng dự án và phục vụ

ng build

Hi vọng điêu nay co ich! Thích viết mã

Cài đặt jQuery bằng NPM Jquery NPM

npm install jquery

Cài đặt tệp khai báo jQuery

npm install -D @types/jquery

Nhập jQuery bên trong .ts

import * as $ from 'jquery';

gọi vào trong lớp

export class JqueryComponent implements OnInit {

constructor() {
}

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

}

Bạn không bắt buộc phải khai báo bất kỳ biến jQuery nào khi bạn đã cài đặt @ type / jquery.

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

Bạn nên có quyền truy cập vào jQuery ở mọi nơi.

Những điều sau sẽ hoạt động:

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

Bạn không nên sử dụng jQuery trong Angular. Mặc dù có thể (xem các câu trả lời khác cho câu hỏi này), nhưng nó không được khuyến khích. Tại sao?

Angular giữ một bản đại diện riêng của DOM trong bộ nhớ của nó và không sử dụng các bộ chọn truy vấn (các chức năng như document.getElementById(id)) như jQuery. Thay vào đó, tất cả thao tác DOM được thực hiện bởi Renderer2 (và các chỉ thị Angular như * ngFor và * ngNếu truy cập vào Renderer2 đó trong background / framework-code). Nếu bạn tự mình thao tác DOM với jQuery thì sớm muộn gì bạn cũng sẽ ...

1. Gặp phải sự cố đồng bộ hóa và có những thứ xuất hiện sai hoặc không biến mất vào đúng thời điểm khỏi màn hình của bạn
2. Gặp vấn đề về hiệu suất trong các thành phần phức tạp hơn, vì biểu diễn DOM nội bộ của Angular bị ràng buộc với zone.js và cơ chế phát hiện thay đổi của nó - vì vậy việc cập nhật DOM theo cách thủ công sẽ luôn chặn luồng ứng dụng của bạn đang chạy.
3. Mắc các lỗi khó hiểu khác mà bạn không rõ nguồn gốc.
4. Không thể kiểm tra ứng dụng một cách chính xác (Jasmine yêu cầu bạn biết khi nào các phần tử đã được hiển thị)
5. Không thể sử dụng Angular Universal hoặc WebWorkers

Nếu bạn thực sự muốn bao gồm jQuery (để khai thác một số nguyên mẫu mà bạn chắc chắn sẽ vứt bỏ 100%), tôi khuyên bạn nên đưa nó vào package.json của mình npm install --save jquerythay vì lấy nó từ CDN của google.

TLDR: Để tìm hiểu cách thao tác DOM theo cách Angular, trước tiên hãy xem hướng dẫn tham quan chính thức về các anh hùng: https://angular.io/tutorial/toh-pt2 Nếu bạn cần truy cập các phần tử cao hơn trong hệ thống phân cấp DOM (cha hoặc document body) hoặc vì một số lý do khác như lệnh *ngIf, lệnh *ngFortùy chỉnh, đường ống và các tiện ích góc cạnh khác như [style.background], [class.myOwnCustomClass] không đáp ứng nhu cầu của bạn, hãy sử dụng Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-ví dụ

Thử đi:

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

Hoặc thêm các tập lệnh vào angle-cli.json:

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

và trong tệp .ts của bạn:

declare var $: any;

Bạn có thể cập nhật phiên bản jquery typings của mình như vậy

npm install --save @types/jquery@latest

Tôi đã gặp lỗi tương tự và tôi đã ở nếu trong 5 ngày lướt mạng để tìm giải pháp. Nó hoạt động với tôi và nó sẽ hoạt động với bạn

Nếu bạn có nhu cầu sử dụng các thư viện khác trong các dự án --typescript - không chỉ trong các dự án - angle - bạn có thể tìm kiếm tds (Tệp khai báo TypeScript) được mô tả và có thông tin về các phương thức, kiểu, hàm, v.v., có thể được sử dụng bởi TypeScript, thường không cần nhập. khai báo var là tài nguyên cuối cùng

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

Bạn có thể sử dụng webpack để cung cấp nó. Sau đó nó sẽ được đưa vào DOM tự động.

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'
    }),

  ]
};

Hãy thử sử dụng - khai báo let $: any;

hoặc nhập * dưới dạng $ từ 'jquery / dist / jquery.min.js'; cung cấp đường dẫn chính xác của lib

giải pháp cho bảng chữ:

Bước 1:

npm install jquery

npm install --save-dev @types/jquery

step2: trong Angular.json thêm:

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

hoặc trong index.html thêm:

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

step3: trong * .component.ts nơi bạn muốn sử dụng jquery

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

Sau đó, bạn có thể sử dụng jquery giống như javaScript. Bằng cách này, VScode hỗ trợ tự động đề xuất bằng Typecript

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