कोणीय 4 के साथ jQuery प्लगइन का उपयोग कैसे करें?

Question

मैं एक कोणीय परियोजना में एक रेंज स्लाइडर का उपयोग करना चाहता हूं और मैंने कोणीय 4 के लिए एक उपलब्ध मॉड्यूल का उपयोग करने की कोशिश की।

यह संकलन के दौरान ठीक काम करता है, लेकिन जब मैं इसे तैनाती के लिए बनाने की कोशिश करता हूं, तो यह नीचे की त्रुटि को फेंक देता है।

मैंने कोणीय परियोजना में सीधे jQuery प्लगइन का उपयोग करने के विकल्प की जाँच की और मुझे केवल इसे कोणीय 2 में करने के लिए विकल्प मिल रहे हैं।

क्या कोई तरीका है जिससे हम Angular 4 में jQuery प्लग इन का उपयोग कर सकते हैं?

कृपया मुझे बताओ।

अग्रिम में धन्यवाद!

Comments

इसे एक घटक में लपेटें: hackernoon.com/… इस परिप्रेक्ष्य से ng2 और ng4 के बीच कोई अंतर नहीं है।

— रज़वान डुमित्रु १२'१ru को

Answer 1

हाँ आप Angular 4 के साथ jquery का उपयोग कर सकते हैं

कदम:

1) index.htmlटैग में नीचे लाइन में डाल दिया।

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

2) नीचे घटक 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>

यह आपके काम आएगा। धन्यवाद

Comments

इसने काम कर दिया!! आप jquery-ui जैसे विस्तारित प्लगइन्स का उपयोग कैसे करेंगे?

— तुषार

हल: npm स्थापित jquery && टाइपिंग स्थापित dt ~ jquery --global --save

— जोहान्स

@ जोहान्स टाइपिंग के लिए टाइप करने के लिए डॉक्टर्स टाइप करें। टाइप करें typecriptlang.org/docs/handbook/declaration-files/… , microsoft.github.io/TypeSearch

— Ervin Llojor

@ Jota.Toledo आपको क्या लगता है कि इसे कैसे किया जाना चाहिए? क्या आपके पास इसे करने के सही तरीके के बारे में कोई अतिरिक्त जानकारी है?

— लुकास मदीना

@ Jota.Toledo का मतलब है कि आप इसे कोणीय-cli.json से जोड़ सकते हैं? यह वास्तव में व्यावहारिक लगता है :) सलाह के लिए धन्यवाद

— लुकास मदीना

Answer 2

Npm के साथ jquery स्थापित करें

npm install jquery --save

टाइपिंग जोड़ें

npm install --save-dev @types/jquery

स्क्रिप्ट को कोणीय-क्ली.जसन में जोड़ें

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

प्रोजेक्ट बनाएं और सर्व करें

ng build

उम्मीद है की यह मदद करेगा! कोडिंग का आनंद लें

Comments

इसके अलावा add declare var jquery:any; declare var $ :any;अपने .ts फ़ाइल को मत भूलना ।

@ निर्देश में उन प्रकारों को स्थापित करना शामिल है जिनका अर्थ है कि आपकी लाइनों की आवश्यकता नहीं है।

— सालबाहरा

जब मैं ऐसा करता हूं तो मुझे गलतियां हो रही हैं। मेरे पास 3.2.1 jquery प्रकारों के साथ स्थापित है, इसलिए यह मुझे कोड में त्रुटियां नहीं देता है, लेकिन मुझे अभी भी बिल्ड त्रुटियाँ मिल रही हैं:Cannot find name '$'

— Grungondola

@Grungondola declare const $: any;@ ... डेकोरेटर के ऊपर जोड़ें ।

— एरविन लल्जुकू

क्या यह एंगुलर के ज़ोन के साथ अच्छा खेलता है।

— वोल्फ 359

Answer 3

NPM Jquery NPM का उपयोग करके jQuery स्थापित करें

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

}

Answer 4

जैसा कि आपने @ प्रकार / jquery स्थापित किया है, आपको किसी भी jQuery के चर की घोषणा करने की आवश्यकता नहीं है।

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

आपको हर जगह jQuery की पहुंच होनी चाहिए।

निम्नलिखित काम करना चाहिए:

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

Comments

मुझे यह त्रुटि मिलती है Cannot find name 'jQuery'यदि मैं उन्हें .tsफ़ाइल में घोषित नहीं कर रहा हूँ । इसलिए, अगर किसी को इस समस्या का सामना करना पड़ता है, तो उसे सिर्फ उन्हें घोषित करने की आवश्यकता है।

— अमृत

मेरे पास अतीत में समस्याएँ हैं जहाँ उल्लेख किए गए आयात बयानों की आवश्यकता थी कि टीएस कंपाइलर को शिकायत नहीं करनी चाहिए। हालाँकि, मैंने हाल ही में अपने पैकेजों को अपडेट किया है और अब उन आयात विवरणों के कारण मेरे 3 पार्टी प्लगइन्स को परिभाषित नहीं किया जा सकता है। यहाँ मेरा वर्तमान विन्यास है: कोणीय संस्करण: 4.4.7 @ कोणीय / cli @ 1.7.4 jquery@3.3.1 टाइपस्क्रिप्ट@2.3.4

— nthaxis

Answer 5

आपको कोणीय में jQuery का उपयोग नहीं करना चाहिए। जबकि यह संभव है (इस प्रश्न के अन्य उत्तर देखें), यह हतोत्साहित किया जाता है। क्यों?

कोणीय अपनी मेमोरी में DOM का खुद का प्रतिनिधित्व रखता है और document.getElementById(id)jQuery जैसे क्वेरी-चयनकर्ताओं (कार्यों जैसे ) का उपयोग नहीं करता है । इसके बजाय सभी DOM- जोड़तोड़ Renderer2 (और * ngFor और * ngIf जैसे कि Renderer2 को बैकग्राउंड / फ्रेमवर्क-कोड में एक्सेस करके) द्वारा किया जाता है। यदि आप स्वयं jQuery के साथ DOM में हेरफेर करते हैं तो आप जल्द या बाद में ...

1. सिंक्रनाइज़ेशन समस्याओं में भाग लें और आपकी स्क्रीन से गलत समय पर गलत तरीके से दिखाई देने या गायब नहीं होने की चीजें हैं
2. अधिक जटिल घटकों में प्रदर्शन के मुद्दे हैं, क्योंकि कोणीय के आंतरिक डोम-प्रतिनिधित्व ज़ोन और उसके परिवर्तन का पता लगाने-तंत्र के लिए बाध्य है - इसलिए DOM को मैन्युअल रूप से अपडेट करने से हमेशा वह थ्रेड ब्लॉक हो जाएगा जिस पर आपका ऐप चल रहा है।
3. अन्य भ्रामक त्रुटियां हैं जिनकी उत्पत्ति आपको नहीं पता है।
4. एप्लिकेशन को सही तरीके से जांचने में सक्षम नहीं होने के कारण (जैस्मीन को आपको यह जानना होगा कि तत्वों का प्रतिपादन कब किया गया है)
5. कोणीय यूनिवर्सल या वेबवर्कर्स का उपयोग करने में सक्षम नहीं होना

यदि आप वास्तव में jQuery को शामिल करना चाहते हैं (कुछ प्रोटोटाइप को डक-टैप करने के लिए जिसे आप 100% निश्चित रूप से फेंक देंगे), तो मैं आपको npm install --save jqueryGoogle के CDN से प्राप्त करने के बजाय इसे कम से कम अपने पैकेज में शामिल करने की सलाह देता हूं ।

TLDR: पहली ट्यूटोरियल कोणीय तरह से डोम में हेरफेर करने के लिए कैसे कृपया आधिकारिक यात्रा-के नायकों के माध्यम से जाना सीखने के लिए: https://angular.io/tutorial/toh-pt2 आप डोम पदानुक्रम में ऊपर पहुंच तत्वों के लिए की जरूरत है (माता-पिता या document body) या किसी अन्य कारण से निर्देश *ngIf, जैसे *ngFor, कस्टम निर्देश, पाइप और अन्य कोणीय उपयोगिताओं जैसे[style.background] , [class.myOwnCustomClass] आपकी आवश्यकताओं को पूरा नहीं करते हैं, उपयोग Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-उदाहरण

Comments

मैं आपको समझाता हूं। लेकिन DOM को कैसे एक्सेस करें और इसे कोणीय में बदलें। उदाहरण के लिए $ ('। Js-eachoption [data-id =' + parentId + ']' निकटतम (निकटतम) ('.Levelvel')। (html) के बाद; सिर्फ कोणीय के साथ यह कैसे करें।

— प्रदीप

@ Angular में प्रदीप आप आम तौर पर मूल html-टैग से DOM के अंदर तत्वों की तलाश शुरू नहीं करते हैं, हालांकि यह भी संभव है (किसी घटक के अंदर DOCUMENT या WINDOW को संदर्भित करके)। मॉडर्नाइजेशन (जो कोणीय के लिए बनाया गया है) आपको अपने ऐप को इस तरह से बनाने के लिए मजबूर करता है कि आप मूल तत्वों से केवल बाल तत्वों में हेरफेर करते हैं। एक लंबी अवधि में इस तरह की पदानुक्रमित निर्भरता कोड के विकास और रखरखाव को बहुत आसान बना देती है। इसलिए आपको केवल वर्तमान घटक या किसी ViewChild या ContentChild और उनके बच्चों के होस्ट DOM- तत्व में हेरफेर करने का प्रयास करना चाहिए।

— फिल

@ प्रदीप जब आपको किसी तत्व ( constructor(private renderer: Renderer2, private el: ElementRef) {}) का संदर्भ मिलता है , तो आप या तो उसके बच्चों के लिए फ़िल्टर कर सकते हैं या मूल तत्व-संपत्ति तक पहुँच कर सीधे तत्व में हेरफेर कर सकते हैं ngOnInit() { this.renderer.addClass(this.el.nativeElement, 'wild'); }:। यहाँ एक ट्यूटोरियल है कि आपको और कैसे बताया जाए: alligator.io/angular/use-renderer2

— Phil

@ प्रदीप कृपया ध्यान रखें कि रेंडर 2 आपका एकमात्र विकल्प नहीं है। कोणीय में आप सीधे टेम्पलेट से डोम को हेरफेर कर सकते हैं। उदाहरण के लिए, वर्तमान घटक के टेम्पलेट के अंदर डोम तत्वों के साथ आसानी से नियंत्रित किया जा सकता *ngIf, *ngFor, कस्टम निर्देशों, पाइप और सीएसएस के लिए (से आपके द्वारा किए गए) ngClass, [style.background]और [class.myCustomCssClass]। आगे की मदद के लिए: angular.io/tutorial/toh-pt2

— Phil

Answer 6

इसे इस्तेमाल करे:

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

या स्क्रिप्ट को कोणीय-cli.json में जोड़ें:

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

और आपकी .ts फ़ाइल में:

declare var $: any;

Answer 7

आप अपने jquery टाइपिंग संस्करण को अपडेट कर सकते हैं जैसे

npm install --save @types/jquery@latest

मेरे पास यही त्रुटि थी और अगर मैं 5 दिनों के लिए नेट पर सर्फिंग कर रहा हूं। यह मेरे लिए काम करता है और यह आपके लिए काम करना चाहिए

Answer 8

यदि आपको परियोजनाओं में अन्य पुस्तकालयों का उपयोग करने की आवश्यकता है --typescript-- न केवल परियोजनाओं में - कोण - आप tds की खोज कर सकते हैं (टाइपस्क्रिप्ट घोषणा फ़ाइल) जो कि डिप्रेस हैं और जिसमें विधियों, प्रकारों, कार्यों आदि की जानकारी है। जिसका उपयोग टाइपस्क्रिप्ट द्वारा किया जा सकता है, आमतौर पर आयात की आवश्यकता के बिना। घोषित संस्करण अंतिम संसाधन है

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

Answer 9

आप इसे प्रदान करने के लिए वेबपैक का उपयोग कर सकते हैं । इसके बाद डोम को स्वचालित रूप से इंजेक्ट किया जाएगा।

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

  ]
};

Answer 10

उपयोग करने की कोशिश करें - $ $ घोषित करें: कोई भी;

या आयात * $ के रूप में 'jquery / dist / jquery.min.js' से; परिवाद का सटीक मार्ग प्रदान करें

Answer 11

टाइपस्क्रिप्ट के लिए समाधान:

चरण 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>

step3: * .component.ts में जहाँ आप jquery का उपयोग करना चाहते हैं

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

फिर आप javaScript की तरह ही jquery का उपयोग कर सकते हैं। इस प्रकार, VScode टाइपस्क्रिप्ट द्वारा ऑटो-सुझाव का समर्थन करता है

Answer 12

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