কৌণিক দিয়ে jQuery কীভাবে ব্যবহার করবেন?




angular (16)

কেউ কি আমাকে বলতে পারেন, কীভাবে অ্যাংুলার সহ jQuery ব্যবহার করবেন?

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

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


// jquery npm install jquery --save

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

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

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

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

// আপেক্ষিক পাথ কনফিগারেশন যুক্ত করা (system-config.js এ) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' }; /** 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(){}
}

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 
}

Jquery ইনস্টল করুন

টার্মিনাল npm install jquery

(বুটস্ট্র্যাপ 4 এর জন্য ...)

টার্মিনাল npm install popper.js

টার্মিনাল $ npm install bootstrap

তারপরে app.module.tsimport বিবৃতি যুক্ত করুন।

import 'jquery'

(বুটস্ট্র্যাপ 4 এর জন্য ...)

import 'popper.js'
import 'bootstrap'

এখন আপনার জাভাস্ক্রিপ্ট রেফারেন্স করতে <SCRIPT> ট্যাগ আর লাগবে না।

(আপনি যে কোনও সিএসএস ব্যবহার করতে চান তা styles.css উল্লেখ করতে হবে)

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

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

পদক্ষেপ -১: আপনার সূচী। 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');
 }

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


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

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

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

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

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

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

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

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

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

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

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


আমি এটি সহজ উপায়ে করি - প্রথমে কনসোলে এনপিএম দ্বারা 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 শুরু করবে - বুটস্ট্র্যাপে মডেল উইন্ডো ব্যবহারের জন্য উদাহরণস্বরূপ এটি গুরুত্বপূর্ণ ...


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

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

একটি সহজ উপায়:

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;";
}

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

declare var jQuery:any;

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

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

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

কৌণিক ক্লাইপ ব্যবহার করা

 npm install jquery --save

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

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] //for latest version copy full path of node_modules>jquery>dist>jquery.min.js to avoid path error

এখন jQuery ব্যবহার করতে, আপনাকে যা করতে হবে তা হ'ল আপনি jQuery ব্যবহার করতে চান এমন উপাদানগুলির নীচে এটি আমদানি করতে হবে।

import * as $ from '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 {


  public ngOnInit()
  {
    //jQuery code
        });
    });
  }
}

পদক্ষেপ 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'));
  }


}

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

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

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

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

    }
}

শুধু লেখো

declare var $:any;

সমস্ত আমদানি বিভাগের পরে, আপনি jQuery ব্যবহার করতে পারেন এবং আপনার সূচিপত্র html পৃষ্ঠায় jQuery লাইব্রেরি অন্তর্ভুক্ত করতে পারেন

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

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


অফিসিয়াল ডকুমেন্টেশন হিসাবে গ্লোবাল গ্রন্থাগার ইনস্টলেশন এখানে

  1. এনপিএম থেকে ইনস্টল করুন:

    npm install jquery --save

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

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

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

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



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

আমার জন্য এই কাজ।





angular