কৌনিক সঙ্গে jQuery কিভাবে ব্যবহার করবেন?

Question

কেউ কি বলতে পারবে, কিভাবে ব্যবহার করতে jQuery এর সঙ্গে কৌণিক ?

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

আমি জানি যে ডিওএম উপাদানটির সামনে বা ক্লাসের আইডি চালনার মতো কাজের ক্ষেত্র রয়েছে তবে আমি এটি আরও পরিষ্কার করার আশা করছি।

Comments

আপনি পোস্ট করার সময় আপনি কোন সংস্করণটি ব্যবহার করছেন তা জানেন না তবে আমার কাছে

— সূচি.ইচটিএমএলে জিক্যুরি সিডিএন যুক্ত করার জন্য

এটি কোড-sample.com/2016/07/use-jquery-with-angular-2.html-

— অনিল সিং

যদিও কিছু jQuery কার্যকারিতা (বিশেষত প্লাগইনস বা jQueryUI) অ্যাঙ্গুলার 2 অ্যাপ্লিকেশনটিতে খুব কার্যকর হতে পারে তবে আপনি আপনার প্রশ্নে বর্ণিত হিসাবে অ্যাঙ্গুলার 2 উপাদানগুলির অভ্যন্তর থেকে ডিওএমকে জিজ্ঞাসা করা এবং পরিচালনা করতে ভাল অনুশীলন নয়। অ্যাঙ্গুলার 2 অ্যাপ্লিকেশনগুলিতে আপনি যে ডোম উপাদানগুলি পরিচালনা করতে চান তা আপনার উপাদান মডেলের সাথে আবদ্ধ হওয়া উচিত। মডেল পরিবর্তন অনুসারে DOM উপাদানগুলির স্থিতি পরিবর্তন করা উচিত। এই উত্তরটি দেখুন: স্ট্যাকওভারফ্লো

— অনুশীলন-

আমি মনে করি এর সঠিক উত্তরটি হ'ল: আপনি না।

— কৌণিকটি

একজন ব্যক্তির কেন কৌনিক সহ JQuery ব্যবহার করা উচিত?

— ক্রিশ্চিয়ান ট্রেইনা

Answer 1

Angular2 থেকে jQuery ব্যবহার করা এনজি 1 এর তুলনায় একটি হাওয়া। আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করছেন তবে আপনি প্রথমে jQuery টাইপ স্ক্রিপ্ট সংজ্ঞাটি উল্লেখ করতে পারেন।

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

আপনি কেবল anyটাইপ হিসাবে $বা এর জন্য যেমন ব্যবহার করতে পারতেন তাই টাইপসক্রিপফিটগুলির সংজ্ঞা প্রয়োজন হয় নাjQuery

আপনার কৌণিক উপাদানটিতে আপনার ব্যবহার করে টেমপ্লেট থেকে একটি ডিওএম উপাদান উল্লেখ করা উচিত @ViewChild() ভিউটি আরম্ভ পরে আপনি nativeElementএই বস্তুর সম্পত্তিটি ব্যবহার করতে এবং jQuery এ যেতে পারেন।

$(বা 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=

tslint chosen$ এ সম্পত্তি না থাকার বিষয়ে অভিযোগ করবে , এটি ঠিক করার জন্য আপনি নিজের কাস্টম * .d.ts ফাইলের জিকুয়ারি ইন্টারফেসে একটি সংজ্ঞা যুক্ত করতে পারেন

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

Comments

আমি নিশ্চিত নই যে কেন setTimeoutকাজটি করা দরকার। আমি বেশ কয়েকটি অন্যান্য jQuery উপাদানগুলির সাথে চেষ্টা করেছি এবং দেখে মনে হচ্ছে যে এগুলির সকলেরই সঠিক আরম্ভের জন্য এই কার্যকারিতা প্রয়োজন। আমি আশা করি এটি ভবিষ্যতে এনজি 2-এর রিলিজে পরিবর্তিত হবে

— ভেরেনসকজল্ড

নতুন callbacks alpha37 যোগ হয়েছে github.com/angular/angular/blob/2.0.0-alpha.37/CHANGELOG.md কোর: যোগ afterContentInit, afterViewInit এবং afterViewChecked আঙ্গুলসমূহ (d49bc43), # 3897 বন্ধ

— মুরাদ Zouabi

এটি স্থাপন করা এতটা কঠিন নয়, তবে কৌণিক ১ এর তুলনায় এটি অবশ্যই "বাতাস" নয় not কৌনিক 1 তে আপনাকে কিছু করতে হবে না, এবং আপনি কেবল কোথাও jquery ব্যবহার করতে পারেন। কৌণিক 1 jquery শীর্ষে নির্মিত হয়।

— ব্যবহারকারী 428517

টাইপিংয়ের পরে সংজ্ঞা ইনস্টল করার পরেও জিক্যুরিস্ট্যাটিক এখনও স্বীকৃত নয়।

— গঞ্জালো

আমি মনে করি আমাদের টাইপিংয়ের জন্য NPM ব্যবহার করার মতো এখনই আমাদের এটি আপডেট করতে হবে

— জ্যাকি

Answer 2

সবাই কেন একে রকেট বিজ্ঞান তৈরি করছে? স্থিতিশীল উপাদানগুলির জন্য যেহেতু কিছু বেসিক স্টাফ করা দরকার অন্য কারও জন্য, উদাহরণস্বরূপ, bodyট্যাগ করুন, কেবল এটি করুন:

1. ইনডেক্স। Html এ যোগ করুন script আপনার জ্যাকোরি লাইবের পথে ট্যাগ , যেখানেই আসে না (এইভাবে আপনি আই আই 9 এবং এর চেয়ে কম সংস্করণের জন্য জিকোরির নিম্নতর সংস্করণ লোড করতে আইআই শর্তযুক্ত ট্যাগগুলিও ব্যবহার করতে পারেন)।
2. আপনার export componentব্লকে একটি ফাংশন রয়েছে যা আপনার $("body").addClass("done");কোডকে কল করে: সাধারণভাবে এটি ডিক্লেয়ারেশন ত্রুটির কারণ হয়ে দাঁড়ায়, তাই এই .ts ফাইলে সমস্ত আমদানির পরে, যুক্ত করুন declare var $:any;এবং আপনি যেতে ভাল!

Comments

আমার জন্য কাজ করে না। সুতরাং আমি কিছু রকেট বিজ্ঞান পড়াশোনা করা হবে। :)

— প্রজিৎ শ্রেষ্ঠ

কৌণিক 2 এর বিন্দুটি হ'ল ডিওএমের সাথে ডিল করার জটিলতা দূর করা। কৌণিক 2 এর একটি পৃথক অ্যালগরিদম রয়েছে যা দক্ষতার সাথে আপনার জন্য আপনার উপাদানগুলি রেন্ডার করবে, এজন্য জ্যাকোরি চালানো আরও ভাল যে এটি ডিওএমকে সরাসরি ডিওএমের সাথে চালিত করার পরিবর্তে কৌণিক 2 উপাদানটির দিকে নির্দেশ করে ম্যানিপুলেট করে।

— কেনে

ইন্টেলিজেন্স, আমার বন্ধু, এজন্য

— আয়শ

declare var $:any;জয়ের জন্য!

— টাইলারলিন্ডেল

এটি অবশ্যই কার্যকরভাবে কাজ করে, তবে আপনি যদি পাথরের যুগে বাস না করেন তবে পরিবর্তে গ্রহণযোগ্য উত্তর নিয়ে যান।

— jlh

Answer 3

এটিই আমার পক্ষে কাজ করেছিল।

পদক্ষেপ 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

কীভাবে কৌনিক 2 (যথাযথভাবে) তে jQuery লাগানো যায় তা নির্ধারণ করার জন্য আমাকে এক ঘন্টা সময় নিল ... খুব নিশ্চিত যে ওয়েব ডেভলপমেন্ট পিছনের দিকে যাচ্ছে।

— স্টারবয়

'জ্যাকুয়ারি' কাজ থেকে import আমদানি করার জন্য আপনাকে নির্ধারণ করতে হবে

— নাজেজেজেস

import * as $ from 'jquery';মধ্যে app.module.ts এটি সমগ্র প্রকল্প উপলব্ধ করতে। এবং বিটিডব্লিউ

— মার্টিন স্নাইডার

import $ from 'jquery';এই পৃষ্ঠায় ইমোতে এটিই সবচেয়ে সুন্দর জ্যাকোয়ারি আমদানির বিবৃতি। ঠিক আমি দেখতে চাই এটি দেখতে কেমন হবে।

— cs_pupil

@ স্টারবয় এর কারণ এটি যে কোনও কৌণিক অ্যাপ্লিকেশনটিতে আপনার কোনও জিকুয়ের দরকার নেই এবং যদি আপনি এটি করেন তবে আপনি সম্ভবত কিছু ভুল করছেন।

— phil294

Answer 4

এখন এটি খুব সহজ হয়ে গেছে, আপনি কেবল Angular2 কন্ট্রোলারের অভ্যন্তরে যে কোনও প্রকারের সাথে jQuery ভেরিয়েবল ঘোষণা করে এটি করতে পারেন can

declare var jQuery:any;

এটিকে আমদানি বিবৃতিগুলির ঠিক পরে এবং সংযোজক ডেকরেটারের আগে যুক্ত করুন।

আইডি এক্স বা দশম শ্রেণি সহ যে কোনও উপাদান অ্যাক্সেস করতে আপনার এখনই করতে হবে

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

Comments

যাচাই করা হয়েছে, এটি ওয়েবপ্যাকের সাথে কৌনিক 2 এর জন্য কাজ করে (ইওমেন এস্পনেটকোর এসপিএ দ্বারা উত্পন্ন একটি এসপিএ টেম্পলেট)। প্রায়শই সরলতম পদ্ধতির সবচেয়ে ভাল কাজ করে! ধন্যবাদ।

— বিন্জিযাও

আমি এটি আমার প্রকল্পে ব্যবহার করছি তবে এই পদ্ধতির অভাব হ'ল আমরা jQuery ধরণের সমস্ত শক্তিশালী ধরণের ক্ষমতা

— হারাচ্ছি

কৌণিক 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

আমার জন্য কাজ করেছেন। তবে অনInit প্রয়োগের পরিবর্তে (যা এঙ্গুলার মেনে নিতে চায়নি) আমি মাইকিম্পোনমেন্ট এনজিওনিট () এর ভিতরে ব্যবহার করেছি Qu // আমার jQuery এখানে}

— ইলিয়া কুশলিয়ানস্কি

Answer 6

এই সহজ পদক্ষেপ অনুসরণ করুন। এটা আমার জন্য কাজ করেছে। কোনও বিভ্রান্তি এড়াতে একটি নতুন কৌণিক 2 অ্যাপ্লিকেশন দিয়ে শুরু করুন। আমি কৌণিক ক্লিপ ব্যবহার করছি। সুতরাং, আপনার যদি এটি ইতিমধ্যে না থাকে তবে এটি ইনস্টল করুন। https://cli.angular.io/

পদক্ষেপ 1: একটি ডেমো কৌনিক 2 অ্যাপ তৈরি করুন

ng new jquery-demo

আপনি যে কোনও নাম ব্যবহার করতে পারেন। এখন এটি সিএমডি-র নীচে চালিয়ে কাজ করছে কিনা তা পরীক্ষা করে দেখুন Now

ng serve

আপনি দেখতে পাবেন "অ্যাপ্লিকেশন কাজ করে!" ব্রাউজারে।

পদক্ষেপ 2: বাভার ইনস্টল করুন (ওয়েবের জন্য একটি প্যাকেজ পরিচালক)

ক্লাইনে এই কমান্ডটি চালান (সিডি কমান্ড না ব্যবহার করে আপনি 'jquery-demo' এ নির্দেশ করছেন তা নিশ্চিত করুন):

npm i -g bower --save

সফলভাবে বোভার ইনস্টল করার পরে, নীচের কমান্ডটি ব্যবহার করে একটি 'bower.json' ফাইল তৈরি করুন:

bower init

এটি ইনপুটগুলির জন্য জিজ্ঞাসা করবে, আপনি যদি ডিফল্ট মান চান তবে কেবল সবার জন্য এন্টার টিপুন এবং শেষে "হ্যাঁ" টাইপ করুন যখন এটি জিজ্ঞাসা করবে "ভাল দেখাচ্ছে?"

এখন আপনি "jquery-ডেমো" ফোল্ডারে একটি নতুন ফাইল (bower.json) দেখতে পাবেন। আপনি https://bower.io/ এ আরও তথ্য পেতে পারেন

পদক্ষেপ 3: jquery ইনস্টল করুন

এই আদেশটি চালান

bower install jquery --save

এটি একটি নতুন ফোল্ডার (bower_comp घटक) তৈরি করবে যার মধ্যে jquery ইনস্টলেশন ফোল্ডার থাকবে। এখন আপনি 'bower_comp घटक' ফোল্ডারে jquery ইনস্টল করেছেন।

পদক্ষেপ 4: 'কৌণিক- cli.json' ফাইলে jquery অবস্থান যুক্ত করুন

'কৌণিক-ক্লিপ.জসন' ফাইলটি খুলুন ('জ্যাকুই-ডেমো' ফোল্ডারে উপস্থিত) এবং "স্ক্রিপ্টস" এ jquery অবস্থান যুক্ত করুন। এটি দেখতে এটির মতো হবে:

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

পদক্ষেপ 5: পরীক্ষার জন্য সহজ jquery কোড লিখুন

'App.componal.html' ফাইলটি খুলুন এবং একটি সাধারণ কোড লাইন যুক্ত করুন, ফাইলটি দেখতে এমন দেখাচ্ছে:

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

এখন 'app.componal.ts' ফাইলটি খুলুন এবং 'পি' ট্যাগের জন্য jquery ভেরিয়েবল ঘোষণা এবং কোড যুক্ত করুন। আপনার লাইফসাইকেল হুক এনজিএফটারভিউআইনিট ()ও ব্যবহার করা উচিত। পরিবর্তনগুলি করার পরে ফাইলটি এর মতো দেখতে পাবেন:

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

এই প্রোগ্রামটিতে। এটি এখনও সেরা ক্লায়েন্ট-পার্শ্ব নির্ভরতার জন্য বোর ব্যবহার করি approach

— Fırat KÜÇÜK

" $("p").click(function(){ $(this).hide(); });" কৌণিকালে কখন jQuery ব্যবহার করবেন না তার সেরা উদাহরণ ?!

— মার্টিন স্নাইডার

শুধু এনপিএম ব্যবহার করে সেটআপ করা কি সহজ নয়? npm install jquery --save, তারপরে "scripts":["../node_modules/jquery/dist/jquery.js"], তারপরে import $ from 'jquery';* .ts ফাইলগুলিতে। বোর ব্যবহার করে কী সুবিধা?

— cs_pupil

@ সিএস_পুপিল আপনি এনপিএমও ব্যবহার করতে পারেন তবে বাওয়ারটি কেবলমাত্র ফ্রন্ট এন্ড প্যাকেজ পরিচালনার জন্য তৈরি করা হয়েছে। একটি লুকআপ আছে stackoverflow.com/questions/18641899/...

— AmanDeepSharma

@ আমানদীপশর্মা, ধন্যবাদ! অদ্ভুতরূপে যথেষ্ট যদিও এটি দেখে মনে হচ্ছে যে বোরও হ্রাস পেয়েছে। npm install bowerহল: npm WARN deprecated bower@1.8.0:( stackoverflow.com/a/31219726/3806701 )

— cs_pupil

Answer 7

আপনি কিছু ডিওএম ম্যানিপুলেশন যুক্ত করতে লাইফসাইকেল হুক এনজিএফটারভিউআইনিট () প্রয়োগ করতে পারেন

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

রাউটার ব্যবহার করার সময় সাবধানতা অবলম্বন করুন কারণ কৌণিক 2 ভিউগুলি পুনর্ব্যবহার করতে পারে .. সুতরাং আপনাকে অবশ্যই নিশ্চিত হতে হবে যে ডিওএম উপাদানগুলির ম্যানিপুলেশনগুলি কেবলভিউইনিতের প্রথম কলটিতে সম্পন্ন হয়েছে .. (আপনি এটি করতে স্ট্যাটিক বুলিয়ান ভেরিয়েবল ব্যবহার করতে পারেন)

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;

এবং আপনার সূচী। html এ লিখুন:

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

এটি কেবলমাত্র বিশ্বব্যাপী একবার jquery শুরু করবে - বুটস্ট্র্যাপে মডেল উইন্ডো ব্যবহারের জন্য উদাহরণস্বরূপ এটি গুরুত্বপূর্ণ ...

Comments

আমি জানি না আমি কখনই কৌণিক-ক্লিপ ব্যবহার করি না তবে আমি কৌনিক 2-ওয়েবপ্যাক-স্টার্টার ব্যবহার করি এবং এটি সেখানে কাজ করে।

— কামিল কিয়েসজেউস্কি 11

যে পদ্ধতিটি কোথা থেকে আসে?

— ওমরাল্পার

stackoverflow.com/questions/23603514/...

— কামিল Kiełczewski

আপনার টাইপ হয়েছে => console.log({ conatiner : this.container});এটি ঠিক করুনconsole.log({ container: this.container});

— eric.dummy

Answer 9

পদক্ষেপ 1: কমান্ডটি ব্যবহার করুন: এনপিএম jquery - সেভ ইনস্টল করুন

পদক্ষেপ 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

মডিউল ..নোড_মডিউল / @ প্রকারের / জকিউয়েরি / সূচক "'এর কোনও ডিফল্ট রফতানি নেই

— দিমিত্রি গ্রিঙ্কো

Answer 10

// jquery ইনস্টল করাnpm install jquery --save

// jquery জন্য টাইপ সংজ্ঞা ইনস্টলtypings install dt~jquery --global --save

// নির্ধারিত হিসাবে বিল্ড কনফিগারেশন ফাইলের মধ্যে jquery লাইব্রেরি যুক্ত ("কৌণিক-ক্লিপ-বিল্ড.জেএস" ফাইল)

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

// বিল্ডটিতে jquery লাইব্রেরি যুক্ত করতে বিল্ডটি চালান ng build

// আপেক্ষিক পাথ কনফিগারেশন যুক্ত করা (system-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

আশ্চর্যজনক এটি এনজি-ক্লাইজ প্রকল্পগুলির জন্য নিখুঁতভাবে কাজ করে .. ধন্যবাদ!

— চানক্যা ভাদলা

সুপার স্লিক! আমি আমার প্রকল্পের জন্য কৌণিক-ক্লিপ ব্যবহার করছি এবং এটি সোনার! রক অন

— লোগান এইচ

আমার কাছে কোনও 'কৌণিক-ক্লিপ-বিল্ড.জেএস' ফাইল নেই: /

— গঞ্জালো

Answer 11

আপনি যদি কৌণিক-ক্লিপ ব্যবহার করেন তবে আপনি এটি করতে পারেন:

1. নির্ভরতা ইনস্টল করুন :

   এনপিএম jquery - সেভ ইনস্টল করুন

   এনএমপি ইনস্টল করুন @ প্রকারের / জকিউরি - সেভ-দেব

2. ফাইলটি আমদানি করুন :

   .Angular-cli.json ফাইলের "স্ক্রিপ্ট" বিভাগে "../node_modules/jquery/dist/jquery.min.js" যুক্ত করুন

3. জ্যাকারি ঘোষণা করুন :

   Tsconfig.app.json এর "প্রকার" বিভাগে "$" যুক্ত করুন

আপনি সরকারী কৌণিক ক্লাইপ ডকটিতে আরও বিশদ পেতে পারেন

Comments

এটি নির্মাণের সময় নিম্নলিখিত ত্রুটির কারণ ঘটায়: ত্রুটিতে ERROR 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

স্ক্রিপ্ট অ্যারের অধীনে কৌণিক.জসনে

"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 পরিবর্তে ভুল use./node_modules হয়

— বিকাশ কান্ডারী

Answer 14

যেহেতু আমি একটি নোংরা, আমি ভেবেছিলাম কিছু কার্যকরী কোড রাখাই ভাল।

এছাড়াও, কৌণিক- প্রটেক্টর এর কৌণিক 2 টাইপিং সংস্করণে jQuery নিয়ে সমস্যা রয়েছে$ , তাই শীর্ষ গৃহীত উত্তরগুলি আমাকে একটি পরিষ্কার সংকলন দেয় না।

আমি যে পদক্ষেপগুলি কাজ করতে পারি তা এখানে:

index.html

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

My.componal.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 ব্যবহার করতে পারেন এবং আপনার সূচিপত্রের html পৃষ্ঠায় jQuery লাইব্রেরি অন্তর্ভুক্ত করতে পারেন

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

এটা আমার জন্য কাজ করে

Answer 16

1) উপাদান ডিওএম অ্যাক্সেস করতে।

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 লোডের আগে আপনাকে সূচি 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: অ্যাপ্লিকেশন

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

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

পদক্ষেপ নং। 3: আপনার উপাদানগুলিতে পরিষেবাটি ইনজেক্ট করুন আমার-সুপার-ডুপার.কম্পোনেন্ট.টিসে ইনজেক্ট করুন

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

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

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

যদি কেউ উভয় পদ্ধতির উপকারিতা এবং স্বতন্ত্রতা ব্যাখ্যা করতে পারে তবে আমি অত্যন্ত কৃতজ্ঞ হব: ডিআই jquery একটি পরিষেবা হিসাবে বনাম আমদানি * 'jquery' থেকে;

Answer 18

আমি যে সর্বাধিক কার্যকর উপায়টি খুঁজে পেয়েছি তা হল পৃষ্ঠা / উপাদান নির্মাতার ভিতরে 0 টির সাথে সেটটাইমআউট ব্যবহার করা। অ্যাংুলার সমস্ত সন্তানের উপাদান লোড করা শেষ করার পরে এটি পরবর্তী কার্যনির্বাহী চক্রটিতে jQuery চলুক। কয়েকটি অন্যান্য উপাদান পদ্ধতি ব্যবহার করা যেতে পারে তবে একটি সেটটাইমআউটের অভ্যন্তরে চালানোর সময় আমি সমস্ত চেষ্টা করার চেষ্টা করেছি।

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

Comments

আপনার অবশ্যই ngOnInit()

— এটির

ngAfterViewInit ()

— Niyaz

setTimeoutআপনার যদি অনেকগুলি আইটেম *ngForশেষ করে দেয় তবে আসলে কাজ করবেন না ।

— ক্লাদচঞ্চ

Answer 19

এখানে আমার জন্য কী কাজ করেছে - ওয়েবপ্যাক সহ কৌনিক 2

আমি $টাইপ হিসাবে ঘোষণা করার চেষ্টা করেছি anyকিন্তু যখনই আমি যে কোনও জিকুয়ারি মডিউলটি ব্যবহার করার চেষ্টা করেছি (উদাহরণস্বরূপ) $(..).datepicker()কোনও ফাংশন নয়

যেহেতু আমার ভেন্ডর.এসটি ফাইলের মধ্যে জ্যাকুয়েরি অন্তর্ভুক্ত রয়েছে তাই আমি এটি ব্যবহার করে কেবল আমার উপাদানটিতে আমদানি করেছি

import * as $ from 'jquery';

আমি এখন Jquery প্লাগইন (বুটস্ট্র্যাপ-ডেটটাইমপিকারের মতো) ব্যবহার করতে সক্ষম

Comments

নোট করুন যে আপনার অ্যাপ্লিকেশন বুটস্ট্র্যাপ করতে 5x আরও বেশি সময় নেবে।

— জেক

@ জ্যাক বুটস্ট্র্যাপ লাইব্রেরি লোড করতে সময় লাগছে কারণ?

— raghav710

না, jquery বেশি সময় নেয়। বুটস্ট্র্যাপ! == টুইটার বুটস্ট্র্যাপ

— জেক 12'17

@ জেফ উফ! আমার ধারণা জ্যাকুরি নোটটির জন্য ধন্যবাদ

— raghav710

@ জেক আপনি কী অ্যাপটিকে পুরো অ্যাপ্লিকেশনটিতে জ্যাকেইরি উপলব্ধ করে বুটস্ট্র্যাপ করতে 5x বেশি সময় নেবে তা বোঝাতে আপনার মনে হবে

— মার্ভেল মো

Answer 20

আপনি এটি "ইনজেকশন টোকেন" দিয়ে আমদানির চেষ্টাও করতে পারেন। এখানে বর্ণিত হিসাবে: কোনও সংজ্ঞা ছাড়াই কৌনিক / টাইপসক্রিপ্টে 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 install jquery --save

2. স্ক্রিপ্টগুলিতে প্রয়োজনীয় স্ক্রিপ্ট ফাইলগুলি যুক্ত করুন:

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

আপনি যদি এটি চালাচ্ছেন তবে সার্ভারটি পুনরায় চালু করুন এবং এটি আপনার অ্যাপে কাজ করা উচিত।

---

আপনি একক উপাদান ব্যবহারের ভিতরে ব্যবহার করতে চান তাহলে import $ from 'jquery';আপনার কম্পোনেন্ট ভিতরে

Answer 22

অন্যরা ইতিমধ্যে পোস্ট করেছেন। তবে আমি এখানে একটি সাধারণ উদাহরণ দিচ্ছি যাতে কিছু নতুন আগত ব্যক্তিদের সহায়তা করতে পারে।

পদক্ষেপ -১: আপনার সূচী। Html ফাইলের রেফারেন্স jquery সিডিএন

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

পদক্ষেপ -২: ধরে নিন আমরা একটি বাটনের ক্লিকের উপর ডিভ বা লুকিয়ে রাখতে চাই:

 <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: কম্পোনেন্ট ফাইলটিতে আমদানি হ'ল নমুনা হিসাবে:

declare var $: any;

শুকনো মত ফাংশন তৈরি করার চেয়ে:

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

এটি সর্বশেষতম কৌণিক এবং জিকুয়েরির সাথে কাজ করবে

Answer 23

প্রথমে, এনপিএম ব্যবহার করে 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 থেকে everything হিসাবে সবকিছু আমদানি করছি।

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 লাইব্রেরিটি ব্যবহার না করার চেষ্টা করুন। কৌণিক কাঠামোর জন্য উত্পাদিত বৈশিষ্ট্য এবং গ্রন্থাগারগুলি ব্যবহার করে দেখুন। আপনি যদি সন্ধান () , এইচটিএমএল () , নিকটতম () এবং ইত্যাদির মতো jquery ফাংশনগুলি ব্যবহার করতে চান তবে আমি শুদ্ধ জেএস ব্যবহার করার পরামর্শ দিই। উদাহরণ: ক্যোয়ারী নির্বাচনকারী () , ইনারএইচটিএমএল , প্যারেন্টএলমেন্ট এবং ইত্যাদি ...