Sử dụng jQuery với góc 2

Question

Các hướng dẫn, tôi đang theo dõi, sử dụng jQuery bên trong thư mục typings sử dụng

/// <reference path="../typings/tsd.d.ts" />

bên app.component nhưng đã không làm việc.

Đã cố gắng nhập thư viện vào bên index.html thông qua CDN, sau đó sử dụng tuyên bố var $: any; vẫn không làm việc

cài đặt jQuery qua NPM và nó vào đường dẫn bên trong system.config.ts như sau

paths: { 
    // paths serve as alias 
    'npm:': 'node_modules/', 
    'jquery:': 'node_modules/jquery/dist/jquery.slim.min.js' 
}, 

vẫn không có đầu mối

Cập nhật:

Bây giờ tôi cài đặt góc qua góc -cli. Tôi không 404 lỗi, nhưng ứng dụng vẫn không hoạt động. Đây là vụ để sản xuất các KeyUp trong giao diện điều khiển

https://plnkr.co/edit/8HW67qLUF3t8zmTigXH6?p=preview 

Answer 1

Jquery là tuyệt vời khi bạn muốn chỉ cần làm một thao tác DOM đơn giản, tôi cảm thấy mình là một trong những nhược điểm lớn đối với kiễu góc, DOM đơn giản truy cập trong một dòng sẽ là tuyệt quá. Đây rồi. Tải Jquery trong tệp index.html của bạn. Ngoài ra, bạn cần phải bao gồm các tệp định nghĩa để có được các hàm Jquery hoạt động bên trong các hàm typescript.

<script type="text/javascript" src="/assets/jquery-3.1.1.min.js" async></script> 

Answer 2

Bạn đã đề cập đến bạn chỉ đang sử dụng hướng dẫn, vì vậy, không được đính kèm với cấu hình SystemJS.

Nếu bạn đang sử dụng Angular CLI thay vì (lời khuyên của chúng tôi), bạn có thể làm điều đó như sau:

Cài đặt jQuery, thư viện thực tế

 
npm install jquery --save 

Cài đặt jQuery nguyên cảo autocomplete

 
npm install @types/jquery --save-dev 

Sau đó đi đến tệp ./angular-cli.json tại thư mục gốc của thư mục dự án CLI góc của bạn và tìm số scripts: [] tài sản, thêm này bên trong nó:

 
"../node_modules/jquery/dist/jquery.min.js" 

(hoặc sử dụng phiên bản slim nếu đó là tách trà của bạn, giữ cho phần còn lại của con đường như nó vốn có)

Sau đó, jQuery sẽ có sẵn cho bạn như một biến toàn cục. Bạn có thể đăng nhập jQuery.fn.jquery (mang phiên bản jQuery) để đảm bảo nó hoạt động tốt.

P.S.

Nếu bạn muốn sử dụng Webpack trực tiếp hoặc gulp, chúng ta cần xem mẫu tệp cấu hình của bạn hoặc dự án nào bạn đã sử dụng để tạo dự án (áp dụng cho các dự án Webpack và Gulp).