कोणीय के साथ jQuery का उपयोग कैसे करें?

Question

क्या कोई मुझे बता सकता है, कोणीय के साथ jQuery का उपयोग कैसे करें ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

मुझे पता है जोड़ तोड़ की तरह कामकाज से जुड़े हैं कर रहा हूँ वर्ग या आईडी DOM एलीमेंट अग्रिम की, लेकिन मैं इसे करने का एक क्लीनर तरीका के लिए उम्मीद कर रहा हूँ।

Comments

पता नहीं आप किस संस्करण का उपयोग कर रहे थे जो आपने पोस्ट किए थे, लेकिन मेरे लिए index.html में JQuery cdn को जोड़ना एक घटक में $ कॉल करने के लिए पर्याप्त है

— theFreedomBanana

यह मदद कर सकता है कोड-sample.com/2016/07/use-jquery-with-angular-2.html

— अनिल सिंह

जबकि कुछ jQuery कार्यक्षमता (विशेष रूप से प्लगइन्स या jQueryUI) एक Angular2 ऐप में बहुत उपयोगी हो सकती है, यह Angular2 घटकों के अंदर से DOM को क्वेरी और हेरफेर करने के लिए सबसे अच्छा अभ्यास नहीं है, जैसा कि आपने अपने प्रश्न में वर्णित किया है। Angular2 ऐप्स में जिन DOM तत्वों को आप हेरफेर करना चाहते हैं, वे आपके कंपोनेंट मॉडल से बंधे होने चाहिए। मॉडल परिवर्तन के अनुसार DOM तत्वों की स्थिति बदलनी चाहिए। इस उत्तर को देखें: stackoverflow.com/questions/42411744/best-ults-of-angular-2

— बेन्यामिन शोहम

मुझे लगता है कि इसके लिए सही उत्तर है: यू डॉन्ट। कोणीय से अधिक उन्नत और नया है, इसकी पुराना नहीं है और बहुत क्लीनर कोड है

— mast3rd3mon

एक व्यक्ति को कोणीय के साथ JQuery का उपयोग क्यों करना चाहिए?

— क्रिस्टियन ट्रेना

Answer 1

Ng1 की तुलना में Angular2 से jQuery का उपयोग करना एक हवा है। यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं तो आप पहले jQuery टाइपस्क्रिप्ट परिभाषा को संदर्भित कर सकते हैं।

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitions की आवश्यकता नहीं है क्योंकि आप सिर्फ इस्तेमाल कर सकते हैं anyके लिए प्रकार के रूप में $याjQuery

अपने कोणीय घटक में आपको टेम्पलेट से एक DOM तत्व का उपयोग करना चाहिए @ViewChild()। दृश्य आरंभ होने के बाद आप nativeElementइस ऑब्जेक्ट की संपत्ति का उपयोग कर सकते हैं और jQuery से गुजर सकते हैं।

JQueryStatic के रूप में घोषणा $(या jQuery) आपको jQuery के लिए एक संदर्भित संदर्भ देगा।

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent 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;
            });
    }
}

bootstrap(NgChosenComponent);

यह उदाहरण प्लंकर पर उपलब्ध है: http://plnkr.co/edit/Nq9LnK?p=preview

tslint chosen$ पर एक संपत्ति नहीं होने के बारे में शिकायत करेगा , इसे ठीक करने के लिए आप अपने कस्टम * .d.ts फ़ाइल में JQuery इंटरफ़ेस में एक परिभाषा जोड़ सकते हैं।

interface JQuery {
    chosen(options?:any):JQuery;
}    

Comments

मुझे यकीन नहीं है कि setTimeoutवर्कअराउंड की आवश्यकता क्यों है। मैंने कई अन्य jQuery घटकों के साथ कोशिश की है, और ऐसा लगता है कि उन सभी को सही आरंभीकरण के लिए इस समाधान की आवश्यकता है। मुझे आशा है कि यह ng2 के भविष्य के रिलीज में बदल जाएगा

— वेयरन्सकॉल्ड

new callbacks को अल्फा37 github.com/angular/angular/blob/2.0.0-alpha.37/CHANGELOG.md कोर में जोड़ा गया है: afterContentInit, afterViewInit, और afterViewChecked हुक (d49bc43) में जोड़ा गया , # 3897

— Mourad Zoui 10ab

यह स्थापित करने के लिए उतना मुश्किल नहीं है, लेकिन यह निश्चित रूप से कोणीय 1 की तुलना में "एक हवा" नहीं है। कोणीय 1 में आपको कुछ भी करने की ज़रूरत नहीं थी, और आप बस कहीं भी jquery का उपयोग कर सकते हैं। कोणीय 1 को jquery के ऊपर बनाया गया है।

— user428517

टाइपिंग हालांकि परिभाषाओं को स्थापित करने के बाद, JQueryStatic अभी भी मान्यता प्राप्त नहीं है।

— गोंजालो 19

मुझे लगता है कि हमें इसे थोड़ा अपडेट करने की आवश्यकता है क्योंकि अब हम टाइपिंग के लिए एनपीएम का उपयोग करते हैं

— जैकी

Answer 2

हर कोई इसे रॉकेट साइंस क्यों बना रहा है? किसी और के लिए जिसे स्थैतिक तत्वों पर कुछ बुनियादी चीजें करने की ज़रूरत है, उदाहरण के लिए, bodyटैग, बस यह करें:

1. Index.html में scriptअपने jquery lib के पथ के साथ टैग जोड़ें , इससे कोई फर्क नहीं पड़ता कि इस तरह से (IE9 और उससे कम के लिए jquery के निम्न संस्करण को लोड करने के लिए आप IE सशर्त टैग का उपयोग भी कर सकते हैं)।
2. आपके export componentब्लॉक में एक फ़ंक्शन है जो आपके कोड को कॉल करता है: सामान्य रूप से $("body").addClass("done");यह घोषणा त्रुटि का कारण बनता है, इसलिए बस इस .ts फ़ाइल में सभी आयात करने के बाद, जोड़ें declare var $:any;और आप जाने के लिए अच्छे हैं!

Comments

मेरे लिए काम नहीं करता है। इसलिए मैं कुछ रॉकेट साइंस का अध्ययन करने जा रहा हूं। :)

— प्रजीत श्रेष्ठ

कोणीय 2 का बिंदु DOM से निपटने की जटिलता को दूर करना है। कोणीय 2 में एक अलग एल्गोरिथ्म है जो कुशलतापूर्वक आपके घटकों को आपके लिए प्रस्तुत करेगा, इसीलिए इसकी चाल को बेहतर बनाने के लिए कि डोम को सीधे हेरफेर करने के बजाय, इसे कोणीय 2 घटक की ओर इंगित करके DOM में हेरफेर किया जाए।

— केन

intellisense, मेरे दोस्त, यही कारण है कि

— अय्याश

declare var $:any;जीत के लिए!

— tylerlindell

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

— jlh

Answer 3

इसी से मेरा काम बना है।

STEP 1 - पहले चीजें पहले

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

चरण 2 - आयात

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#अपडेट करें - Feb - 2017

हाल ही में, मैं के साथ कोड लिख रहा हूँ ES6के बजाय typescriptऔर करने में सक्षम हूँ importबिना * as $में import statement। यह अब जैसा दिखता है:

import $ from 'jquery';
//
$('#elemId').width();

शुभ लाभ।

Comments

मुझे एक घंटे में पता चला कि jQuery को कोणीय 2 (उचित रूप से) में कैसे डाला जाए ... बहुत यकीन है कि वेब विकास पीछे जा रहा है।

— Starboy

'Jquery' के काम से $ आयात करने के लिए आपको --loJs

— titusfx

import * as $ from 'jquery';app.module.ts में इसे पूरी परियोजना के लिए उपलब्ध कराने के लिए। और btw: "क्यों --save- देव के बजाय -save?"

— मार्टिन श्नाइडर

import $ from 'jquery';इस पृष्ठ imo पर यह सबसे सुंदर jquery आयात विवरण है। वास्तव में मैं क्या चाहता हूं कि यह दिखे।

— cs_pupil

@Starboy क्योंकि आपको कोणीय अनुप्रयोग में किसी भी JQuery की आवश्यकता नहीं होनी चाहिए और यदि आप करते हैं, तो आप शायद कुछ गलत कर रहे हैं।

— phil294

Answer 4

अब यह बहुत आसान हो गया है, आप इसे केवल Angular2 नियंत्रक के अंदर किसी भी प्रकार के साथ jQuery चर घोषित करके कर सकते हैं।

declare var jQuery:any;

इसे आयात विवरणों के बाद और घटक डेकोरेटर से पहले जोड़ें।

आईडी एक्स या दसवीं कक्षा के साथ किसी भी तत्व का उपयोग करने के लिए आपको बस करना होगा

jQuery("#X or .X").someFunc();

Comments

सत्यापित, यह वेबपैक 2 के साथ काम करता है (वेबमैन एस्पनेटकोर एसपीए द्वारा तैयार एसपीए टेम्पलेट)। अक्सर सबसे सरल दृष्टिकोण सबसे अच्छा काम करता है! धन्यवाद।

— बिंजेझो

मैं इसे अपने प्रोजेक्ट पर उपयोग कर रहा हूं, लेकिन इस विधि की कमी से हम jQuery के प्रकारों की सभी मजबूत प्रकार की क्षमता खो रहे हैं :)

— trungk18

एंगुलर 6 (6.0.3) में कार्य करना

— एलेजांद्रो मोरन

इसमें काम करना: कोणीय सीएलआई: 7.1.4 नोड: 10.15.0

— लांस

Answer 5

एक सरल तरीका:

1. स्क्रिप्ट शामिल है

index.html

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

2. घोषित करें

my.component.ts

declare var $: any;

3. उपयोग

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

Comments

मेरे लिए काम किया। लेकिन लागू होने के बजाय OnInit (जो कोणीय स्वीकार नहीं करना चाहता था) मैंने MyComponent ngOnInit () {// my jQuery यहाँ} के अंदर उपयोग किया

— Ilya Kushlianski

Answer 6

कृपया इन सरल चरणों का पालन करें। इसने मेरे लिए काम किया। किसी भी भ्रम से बचने के लिए एक नए कोणीय 2 ऐप के साथ शुरू करें। मैं Angular cli का उपयोग कर रहा हूं। यदि आपके पास पहले से यह नहीं है, तो इसे स्थापित करें। https://cli.angular.io/

चरण 1: एक डेमो कोणीय 2 ऐप बनाएं

ng new jquery-demo

आप किसी भी नाम का उपयोग कर सकते हैं। अब जांचें कि क्या यह cmd के नीचे चल कर काम कर रहा है। (अब, सुनिश्चित करें कि आप cd कमांड का उपयोग नहीं करने पर 'jquery- डेमो' की ओर इशारा कर रहे हैं)

ng serve

आप देखेंगे "ऐप काम करता है!" ब्राउज़र पर।

चरण 2: स्थापित करें बोवर (वेब ​​के लिए एक पैकेज प्रबंधक)

इस आदेश को cli पर चलाएं (सुनिश्चित करें कि आप cd कमांड का उपयोग नहीं करने पर 'jquery- डेमो' की ओर इशारा कर रहे हैं):

npm i -g bower --save

बोअर की सफल स्थापना के बाद, नीचे कमांड का उपयोग करके 'bower.json' फ़ाइल बनाएँ:

bower init

यह इनपुट के लिए पूछेगा, यदि आप डिफ़ॉल्ट मान चाहते हैं, तो सभी के लिए बस एंटर दबाएं और अंतिम प्रकार "हां" पर जब यह पूछेगा कि "यह अच्छा लग रहा है?"

अब आप "jquery- डेमो" फ़ोल्डर में एक नई फ़ाइल (bower.json) देख सकते हैं। आप https://bower.io/ पर अधिक जानकारी प्राप्त कर सकते हैं

चरण 3: jquery स्थापित करें

इस आदेश को चलाने के लिए

bower install jquery --save

यह एक नया फ़ोल्डर (bower_compenders) बनाएगा जिसमें jquery इंस्टॉलेशन फ़ोल्डर होगा। अब आपके पास 'bower_compenders' फ़ोल्डर में jquery स्थापित है।

चरण 4: 'कोणीय-cli.json' फ़ाइल में jquery स्थान जोड़ें

'कोणीय-cli.json' फ़ाइल ('jquery- डेमो' फ़ोल्डर में मौजूद) खोलें और "स्क्रिप्ट" में jquery स्थान जोड़ें। " यह इस तरह दिखेगा:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

चरण 5: परीक्षण के लिए सरल jquery कोड लिखें

'App.component.html' फ़ाइल खोलें और एक सरल कोड लाइन जोड़ें, फ़ाइल इस तरह दिखाई देगी:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

अब 'app.component.ts' फ़ाइल खोलें और 'p' टैग के लिए jquery वैरिएबल डिक्लेरेशन और कोड जोड़ें। आपको जीवन चक्र हुक ngAfterViewInit () का भी उपयोग करना चाहिए। परिवर्तन करने के बाद फ़ाइल इस तरह दिखाई देगी:

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

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

अब 'एनजी सर्व' कमांड का उपयोग करके अपने कोणीय 2 ऐप को चलाएं और इसका परीक्षण करें। यह काम करना चाहिए।

Comments

IMHO। यह सबसे अच्छा तरीका है जो मैं अभी भी क्लाइंट-साइड निर्भरता के लिए बोवर का उपयोग करता हूं।

— फ्यरत कृक

" $("p").click(function(){ $(this).hide(); });" का सबसे अच्छा उदाहरण जब कोणीय में jQuery का उपयोग नहीं करते हैं ?!

— मार्टिन श्नाइडर

क्या सिर्फ npm का उपयोग करके सेटअप करना आसान नहीं है? npm install jquery --save, फिर "scripts":["../node_modules/jquery/dist/jquery.js"], import $ from 'jquery';* .ts फ़ाइलों में। बोवर का उपयोग करने से क्या फायदा है?

— cs_pupil

@cs_pupil आप npm का भी उपयोग कर सकते हैं लेकिन बोवर केवल फ्रंट एंड पैकेज के प्रबंधन के लिए बनाया गया है। एक लुकअप stackoverflow.com/questions/18641899/…

— AmanDeepSharma

@AmanDeepSharma, धन्यवाद! विचित्र रूप से पर्याप्त है, हालांकि ऐसा लगता है कि बोवर को हटा दिया गया है। npm install bowernpm WARN deprecated bower@1.8.0:

— उपज

Answer 7

आप कुछ DOM जोड़तोड़ को जोड़ने के लिए जीवन चक्र हुक ngAfterViewInit () को लागू कर सकते हैं

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

राउटर का उपयोग करते समय सावधान रहें क्योंकि angular2 दृश्य रीसायकल कर सकता है .. इसलिए आपको यह सुनिश्चित करना होगा कि DOM तत्वों की जोड़तोड़ केवल afterViewInit के पहले कॉल में की जाती है .. (आप ऐसा करने के लिए स्टेटिक बूलियन वैरिएबल का उपयोग कर सकते हैं)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

Comments

Property 'domElement' does not exist on type ElementRef

— विलास

Answer 8

मैं इसे सरल तरीके से करता हूं - पहले कंसोल में एनपीएम द्वारा jquery स्थापित करें: npm install jquery -Sऔर फिर घटक फ़ाइल में मैं बस लिखता हूं: let $ = require('.../jquery.min.js')और यह काम करता है! यहाँ मेरे कुछ कोड से पूर्ण उदाहरण:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

उदाहरण के लिए, मेरे पास:

<div class="departments-connections-graph">something...</div>

---

संपादित करें

वैकल्पिक रूप से उपयोग करने के बजाय:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

उपयोग

declare var $: any;

और अपने index.html put में:

<script src="assets/js/jquery-2.1.1.js"></script>

यह केवल एक बार वैश्वीकरण के बाद jquery को प्रारंभ करेगा - यह बूटस्ट्रैप में मोडल विंडो के उपयोग के लिए महत्वपूर्ण है ...

Comments

मुझे नहीं पता कि मैं कभी भी कोणीय-क्ली का उपयोग नहीं करता हूं, लेकिन मैं कोणीय 2-वेबपैक-स्टार्टर का उपयोग करता हूं और यह वहां काम करता है।

— Kamil Kiełczewski

वह विधि कहां से आती है?

— ओमकार

stackoverflow.com/questions/23603514/…

— कामिल Kiełczewski 14

आपके पास एक टाइपो => console.log({ conatiner : this.container});इसे ठीक करेंconsole.log({ container: this.container});

— eric.dummy

Answer 9

चरण 1: कमांड का उपयोग करें: npm स्थापित करें jquery --save

चरण 2: आप बस कोणीय को आयात कर सकते हैं:

'jquery' से $ आयात;

बस इतना ही ।

एक उदाहरण होगा:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

Comments

मॉड्यूल ..node_modules / @ प्रकार / jquery / सूचकांक "का कोई डिफ़ॉल्ट निर्यात नहीं है

— दिमित्री ग्रिंको

Answer 10

// jquery स्थापित करनाnpm install jquery --save

// jquery के लिए टाइप डेफिनिशन स्थापित करनाtypings install dt~jquery --global --save

// निर्दिष्ट कॉन्फ़िगरेशन फ़ाइल में jquery लाइब्रेरी को जोड़ने के रूप में निर्दिष्ट ("कोणीय-cli-build.js" फ़ाइल में)

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// बिल्ड में jquery लाइब्रेरी को जोड़ने के लिए बिल्ड रन करें ng build

// सापेक्ष पथ विन्यास को जोड़ना (सिस्टम- config.js में) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// अपने घटक फ़ाइल में jquery लाइब्रेरी आयात करें

import 'jquery';

नीचे मेरे नमूना घटक का कोड स्निपेट है

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Comments

बहुत बढ़िया यह एनजी-क्ली परियोजनाओं के लिए एकदम सही काम करता है .. धन्यवाद!

— चाणक्य वडला

सुपर चालाक! मैं अपने प्रोजेक्ट के लिए Angular-cli का उपयोग कर रहा हूं और यह सोना है! रॉक ऑन

— लोगान एच।

मेरे पास कोई 'कोणीय-क्ली-बिल्ड.जेएस' फ़ाइल नहीं है: /

— गोंजालो

Answer 11

यदि आप कोणीय-क्ली का उपयोग करते हैं तो आप कर सकते हैं:

1. निर्भरता स्थापित करें :

   npm स्थापित करें jquery --save

   npm स्थापित @ प्रकार / jquery --save- देव

2. फ़ाइल आयात करें :

   ".. स्क्रिप्ट" अनुभाग में .angular-cli.json फ़ाइल में "../node_modules/jquery/dist/jquery.min.js" जोड़ें।

3. घोषणा घोषित करें :

   Tsconfig.app.json के "प्रकार" अनुभाग में "$" जोड़ें

आप आधिकारिक कोणीय क्लि डॉक पर अधिक जानकारी पा सकते हैं

Comments

निर्माण करते समय यह निम्न त्रुटि का कारण बनता है: त्रुटि TS2688 में त्रुटि: '$' के लिए टाइप परिभाषा फ़ाइल नहीं मिल सकती।

— चित्रण

त्रुटि TS1192: मॉड्यूल '' jquery '' का कोई डिफ़ॉल्ट निर्यात नहीं है

— दिमित्री ग्रिंको

Answer 12

Angular2 में Jquery का उपयोग करने के लिए (4)

इन सेट्स का पालन करें

Jquery और Juqry प्रकार के डिफेक्शन को स्थापित करें

Jquery स्थापना के लिए npm install jquery --save

Jquery प्रकार डिफिनेशन इंस्टालेशन के लिए npm install @types/jquery --save-dev

और फिर बस jquery आयात करें

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

Comments

आकाश के जवाब की नकल ?

— मार्टिन श्नाइडर

Answer 13

कोणीय क्ली का उपयोग करना

 npm install jquery --save

स्क्रिप्ट सरणी के तहत angular.json में

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

अब jQuery का उपयोग करने के लिए, आपको जो कुछ भी करना है, उसे इस प्रकार आयात करना है कि आप jQuery का उपयोग करना चाहते हैं।

उदाहरण के लिए रूट कंपोनेंट में jQuery का आयात और उपयोग करना

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Comments

रास्ता गलत उपयोग है ।/node_modules के बजाय ../node_modules

— विकास कंडारी

Answer 14

चूँकि मैं एक दुसरा व्यक्ति हूँ, मुझे लगा कि कुछ काम कोड करना अच्छा होगा।

इसके अलावा, कोणीय- प्रोट्रैक्टर के Angular2 टाइपिंग संस्करण में jQuery के साथ समस्याएं हैं$ , इसलिए शीर्ष स्वीकृत उत्तर मुझे एक स्वच्छ संकलन नहीं देता है।

यहां वे चरण हैं जो मुझे काम करने के लिए मिले:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

My.component.ts के अंदर

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

Answer 15

बस लिखें

declare var $:any;

सभी आयात अनुभागों के बाद, आप jQuery का उपयोग कर सकते हैं और jQuery लाइब्रेरी को अपने index.html पृष्ठ में शामिल कर सकते हैं

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

यह मेरे लिए काम किया

Answer 16

1) घटक में DOM का उपयोग करने के लिए।

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

आप निम्नलिखित तरीके से jQuery को शामिल कर सकते हैं। 2) कोणीय 2 भार से पहले index.html में jquery फ़ाइल शामिल करें

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

आप निम्नलिखित तरीके से Jquery का उपयोग कर सकते हैं, यहाँ मैं JQuery Ui दिनांक पिकर का उपयोग कर रहा हूँ।

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

यह काम मेरे लिए।

Answer 17

मैं jquery की स्थापना को छोड़ रहा हूं क्योंकि इस बिंदु का उल्लेख मेरी बनाई गई सभी पोस्टों में किया गया है। तो, आप पहले से ही jquery स्थापित कर चुके हैं। इस तरह से अपने घटक में टी आयात करना

import * as $ from 'jquery';

काम करेगा, लेकिन सेवा बनाकर ऐसा करने का एक और 'कोणीय' तरीका है।

स्टेप नं। 1: jquery.service.ts फ़ाइल बनाएँ ।

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

चरण। नहीं। 2: app.module.ts में सेवा को पंजीकृत करें

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

स्टेप नं। 3: अपने घटक my-super-duper.component.ts में सेवा को इंजेक्ट करें

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

मैं बहुत आभारी रहूंगा यदि कोई व्यक्ति दोनों विधियों के पेशेवरों और विपक्षों को समझा सकता है: DI jquery एक सेवा बनाम आयात * के रूप में 'jquery' से $ के रूप में;

Answer 18

सबसे प्रभावी तरीका जो मैंने पाया है वह पृष्ठ / घटक निर्माता के अंदर 0 के समय के साथ सेटटाइमआउट का उपयोग करना है। आइए, Angular द्वारा सभी बाल घटकों को लोड करने के बाद अगले निष्पादन चक्र में jQuery चलाएं। कुछ अन्य घटक विधियों का उपयोग किया जा सकता है, लेकिन जब मैंने सेटटाइमआउट के अंदर भाग लिया, तो मैंने पूरी कोशिश की है।

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

Comments

आपको इसके ngOnInit()बजाय निश्चित रूप से उपयोग करना चाहिए

— xordon

ngAfterViewInit ()

— नियाज़

setTimeoutवास्तव में काम नहीं करता है अगर आपके पास *ngForफिनिश रेंडर करने के लिए कई आइटम हैं ।

— क्लुदचन

Answer 19

यहाँ मेरे लिए क्या काम किया है - वेबपैक के साथ कोणीय 2

मैंने $टाइप के रूप में घोषित करने की कोशिश की, anyलेकिन जब भी मैं किसी भी JQuery मॉड्यूल का उपयोग करने की कोशिश करता था जो मुझे मिल रहा था (उदाहरण के लिए)$(..).datepicker() एक फ़ंक्शन नहीं है

चूँकि मैं अपने वेंडर के पास फ़ाइल में शामिल किया गया है

import * as $ from 'jquery';

मैं अब Jquery प्लगइन्स (जैसे बूटस्ट्रैप-डेटाइमपिकर) का उपयोग करने में सक्षम हूं

Comments

ध्यान दें कि आपका ऐप बूटस्ट्रैप में 5 गुना अधिक समय लेगा।

— जेक

@ जेक बूटस्ट्रैप पुस्तकालयों को लोड करने में लगने वाले समय के कारण है?

— राघव r१०

नहीं, jquery में अधिक समय लगता है। बूटस्ट्रैप! == ट्विटर बूटस्ट्रैप

— जेक

@ जेक उफ़! मेरा मतलब था jquery मुझे लगता है। नोट के लिए धन्यवाद

— raghav710

@ जेक आपको यह समझाएंगे कि क्यों एक ऐप पूरे अनुप्रयोग के लिए jquery बनाकर बूटस्ट्रैप में 5 गुना अधिक समय लेगा

— मार्वल मो

Answer 20

आप इसे "InjectionToken" के साथ आयात करने का भी प्रयास कर सकते हैं। जैसा कि यहाँ वर्णित है: एक प्रकार की परिभाषा के बिना कोणीय / टाइपस्क्रिप्ट में jQuery का उपयोग करें

आप बस jQuery के वैश्विक उदाहरण को इंजेक्ट कर सकते हैं और इसका उपयोग कर सकते हैं। इसके लिए आपको किसी प्रकार की परिभाषा या टाइपिंग की आवश्यकता नहीं होगी।

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

जब आपके app.module.ts में सही तरीके से सेट किया गया हो:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

आप इसे अपने घटकों में उपयोग करना शुरू कर सकते हैं:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Answer 21

आधिकारिक दस्तावेज के रूप में ग्लोबल लाइब्रेरी इंस्टॉलेशन

1. Npm से स्थापित करें:

   npm install jquery --save

2. स्क्रिप्ट में आवश्यक स्क्रिप्ट फ़ाइलें जोड़ें:

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

यदि आप इसे चला रहे हैं, तो सर्वर को पुनरारंभ करें और यह आपके ऐप पर काम कर रहा होना चाहिए।

---

यदि आप import $ from 'jquery';अपने घटक के अंदर एकल घटक का उपयोग करना चाहते हैं

Answer 22

अन्य पहले से ही तैनात हैं। लेकिन मैं यहां एक सरल उदाहरण देता हूं ताकि कुछ नए साथियों को मदद मिल सके।

चरण -1: अपने index.html फ़ाइल संदर्भ jquery cdn में

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

चरण -2: मान लें कि हम एक बटन के क्लिक पर div या hide div दिखाना चाहते हैं:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

चरण -3: घटक फ़ाइल में bellow आयात को bellow के रूप में घोषित करें:

declare var $: any;

बलो जैसे फंक्शन बनाएं:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

यह नवीनतम कोणीय और JQuery के साथ काम करेगा

Answer 23

सबसे पहले, निम्नानुसार npm का उपयोग करके jQuery स्थापित करें:

npm install jquery — save

दूसरा, अपने कोणीय सीएलआई प्रोजेक्ट फ़ोल्डर के मूल में ./angular-cli.json फ़ाइल पर जाएँ, और स्क्रिप्ट खोजें: [] संपत्ति, और निम्नानुसार jQuery के लिए पथ शामिल करें:

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

अब, jQuery का उपयोग करने के लिए, आपको यह करना है कि जो भी घटक आप jQuery का उपयोग करना चाहते हैं, उसमें इसे आयात करें।

import * as $ from 'jquery';
(or)
declare var $: any;

नीचे दिए गए कोड पर एक नज़र डालें जो क्लिक करने पर jQuery का उपयोग करता है, विशेषकर दूसरी पंक्ति में। हम सब कुछ $ jQuery से आयात कर रहे हैं।

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

Answer 24

Jquery स्थापित करें

टर्मिनल $ npm install jquery

(बूटस्ट्रैप 4 के लिए ...)

टर्मिनल $ npm install popper.js

टर्मिनल $ npm install bootstrap

फिर importस्टेटमेंट को इसमें जोड़ें app.module.ts।

import 'jquery'

(बूटस्ट्रैप 4 के लिए ...)

import 'popper.js'
import 'bootstrap'

अब आपको <SCRIPT>जावास्क्रिप्ट को संदर्भित करने के लिए टैग की आवश्यकता नहीं होगी ।

(कोई भी सीएसएस जिसका आप अभी भी उपयोग करना चाहते हैं उसे संदर्भित किया जाना है styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Answer 25

जब आप कोणीय का उपयोग करते हैं, तो jquery लाइब्रेरी का उपयोग न करने का प्रयास करें। सुविधाओं और पुस्तकालयों का उपयोग करने का प्रयास करें जो कोणीय ढांचे के लिए निर्मित होते हैं। यदि आप खोज () , html () , निकटतम () और आदि जैसे jquery फ़ंक्शंस का उपयोग करना चाहते हैं , तो मैं शुद्ध एसएस का उपयोग करने का सुझाव देता हूं। उदाहरण: querySelector () , innerHTML , parentElement और आदि ...