কৌণিক 4 সঙ্গে jQuery প্লাগইন কীভাবে ব্যবহার করবেন?

Question

আমি কৌণিক প্রকল্পে একটি পরিসীমা স্লাইডার ব্যবহার করতে চাই এবং আমি কৌনিক 4 এর জন্য একটি উপলব্ধ মডিউল ব্যবহার করার চেষ্টা করেছি।

এটি সংকলনের সময় ভাল কাজ করে তবে আমি যখন এটি স্থাপনার জন্য তৈরি করার চেষ্টা করি তখন এটি নীচের ত্রুটিটি ছুঁড়ে দেয়।

আমি সরাসরি কৌণিক প্রকল্পে jQuery প্লাগইন ব্যবহার করার বিকল্পটি পরীক্ষা করেছিলাম এবং আমি কেবল কৌনিক 2 এ এটি করার জন্য বিকল্পগুলি পাচ্ছি।

অংগুলার 4 এ আমরা jQuery প্লাগইনগুলি ব্যবহার করতে পারি এমন কোনও উপায় আছে কি?

আমাকে বুঝতে দাও.

আগাম ধন্যবাদ!

Comments

এটিকে কোনও উপাদানগুলিতে মুড়িয়ে দিন: হ্যাকারুনুন. com/… এই দৃষ্টিকোণ থেকে এনজি 2 এবং এনজি 4 এর মধ্যে কোনও পার্থক্য নেই।

— রাজ্জান ডুমিত্রু

Answer 1

হ্যাঁ আপনি কৌণিক 4 সঙ্গে jquery ব্যবহার করতে পারেন

পদক্ষেপ:

1) index.htmlট্যাগে লাইন নিচে।

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

2) নীচের অংশে ts ফাইলে আপনাকে এর মতো ভেরি ঘোষণা করতে হবে

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

}

এবং এই জাতীয় এইচটিএমএল ফাইলের জন্য এই কোডটি ব্যবহার করুন:

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

এটি আপনার পক্ষে কাজ করবে। ধন্যবাদ

Comments

এটা কাজ করেছে!! আপনি jquery-ui এর মতো বর্ধিত প্লাগইনগুলি কীভাবে ব্যবহার করবেন?

— তুষার

সমাধান করা হয়েছে: এনপিএম ইনস্টল করুন জ্যাকোয়ারি && টাইপিংস dt t jquery --global --save

— জোহানেস

@Johannes typings জন্য টাইপ করা বিষয় ডক্স পড়ুন typescriptlang.org/docs/handbook/declaration-files/... , microsoft.github.io/TypeSearch

— Ervin Llojku

@ জোটা. টলেড আপনি কীভাবে মনে করেন এটি সম্পন্ন করা উচিত? এটি করার সঠিক উপায় সম্পর্কে আপনার কাছে কোনও অতিরিক্ত তথ্য আছে?

— mluke

@ জোটা. টলেড মানে আপনি এটিকে কৌণিক-ক্লিপ.জসনে যুক্ত করবেন? সত্যিই এটি ব্যবহারিক বলে মনে হচ্ছে :) পরামর্শের জন্য ধন্যবাদ

— ই

Answer 2

এনপিএম সহ 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 ফাইলটিতেও ভুলে যাবেন না ।

@ নর্ক্স নির্দেশিকায় এমন ধরণের ইনস্টল করা রয়েছে যার অর্থ আপনার লাইনগুলির প্রয়োজন নেই।

— সালবাহরা

আমি যখন এটি করি তখন বিল্ড ত্রুটিগুলি পাচ্ছি। আমার সাথে jquery 3.2.1 ইনস্টল করা আছে, তাই এটি কোডে আমাকে ত্রুটি দেয় না, তবে আমি এখনও Cannot find name '$'

— বিল্ডিংয়ের

declare const $: any;@ গ্রানগনডোলা @ ... ডেকরেটারের উপরে যুক্ত করুন ।

— এরভিন ললোজকু

এটি কি অ্যাংুলারের জোন.জেএস সহ ভাল খেলে?

— উলফ 359

Answer 3

এনপিএম জ্যাকুয়ারি এনপিএম ব্যবহার করে জিকুয়ারি ইনস্টল করুন

npm install jquery

JQuery ঘোষণা ফাইল ইনস্টল করুন

npm install -D @types/jquery

.Ts এর ভিতরে jQuery আমদানি করুন

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ফাইলে ঘোষণা না করি । সুতরাং, যদি কেউ এই সমস্যার মুখোমুখি হন তবে তাকে কেবল সেগুলি প্রকাশ করা দরকার।

— আমর

আমার অতীতে সমস্যা হয়েছিল যেখানে উল্লিখিত আমদানির বিবৃতিগুলি টিএস সংকলকটি অভিযোগ না করার জন্য প্রয়োজনীয় ছিল। যাইহোক, আমি সম্প্রতি আমার প্যাকেজগুলি আপডেট করেছি এবং এখন সেগুলি আমদানি বিবৃতিগুলির কারণে আমার তৃতীয় পক্ষের প্লাগইনগুলি সংজ্ঞায়িত করা যায় না। এখানে আমার বর্তমান কনফিগারেশনটি রয়েছে: কৌণিক সংস্করণ: 4.4.7 @ কৌণিক / ক্লিপ @ 1.7.4 jquery@3.3.1 টাইপসক্রিপ্ট @ ২.৩.৩

— এনটিএক্সেক্স

Answer 5

আপনার কৌণিক ক্ষেত্রে jQuery ব্যবহার করা উচিত নয়। যদিও এটি সম্ভব (এই প্রশ্নের অন্যান্য উত্তর দেখুন), এটি নিরুৎসাহিত করা হয়। কেন?

কৌণিকর তার স্মৃতিতে DOM এর নিজস্ব প্রতিনিধিত্ব রাখে এবং document.getElementById(id)jQuery এর মতো ক্যোয়ারী-নির্বাচক (ফাংশনগুলি ) ব্যবহার করে না । পরিবর্তে সমস্ত ডিওএম-ম্যানিপুলেশন রেন্ডারার 2 দ্বারা সম্পন্ন হয় (এবং এনজিফোর্ড এবং * এনজিফায়ার মতো কৌণিক নির্দেশাবলী যদি ব্যাকগ্রাউন্ড / ফ্রেমওয়ার্ক-কোডটিতে সেই রেন্ডারার 2 অ্যাক্সেস করে)। আপনি যদি jQuery দিয়ে নিজেকে ডিওএম চালিত করেন আপনি তাড়াতাড়ি বা পরে ...

1. সিঙ্ক্রোনাইজেশনের সমস্যাগুলিতে চলে আসুন এবং আপনার স্ক্রীন থেকে সঠিক সময়ে সঠিকভাবে উপস্থিত হতে বা অদৃশ্য হয়ে যাওয়া জিনিসগুলি পান
2. আরও জটিল উপাদানগুলিতে পারফরম্যান্স সংক্রান্ত সমস্যাগুলি রয়েছে কারণ অ্যাংুলারের অভ্যন্তরীণ ডিওএম-উপস্থাপনাটি জোন.জেএস এবং তার পরিবর্তন সনাক্তকরণ-প্রক্রিয়াতে আবদ্ধ - সুতরাং ডমকে ম্যানুয়ালি আপডেট করা আপনার অ্যাপ্লিকেশনটি যে থ্রেডে চলছে তা সর্বদা অবরুদ্ধ করবে।
3. অন্যান্য বিভ্রান্তিকর ত্রুটি রয়েছে যা আপনি এর উত্সটি জানেন না।
4. অ্যাপ্লিকেশনটি সঠিকভাবে পরীক্ষা করতে সক্ষম হচ্ছে না (জুঁইটি আপনাকে উপাদানগুলি কখন রেন্ডার করা হয়েছে তা জানতে হবে)
5. অ্যাঙ্গুলার ইউনিভার্সাল বা ওয়েব ওয়ার্কার্স ব্যবহার করতে সক্ষম হচ্ছে না

আপনি যদি সত্যিই jQuery অন্তর্ভুক্ত করতে চান (কিছু প্রোটোটাইপ হাঁস-টেপিংয়ের জন্য যা আপনি 100% সুনির্দিষ্টভাবে দূরে ফেলবেন), আমি কমপক্ষে গুগলের npm install --save jqueryসিডিএন থেকে পাওয়ার পরিবর্তে এটি আপনার প্যাকেজ.জসনে অন্তর্ভুক্ত করার পরামর্শ দিচ্ছি ।

টিএলডিআর: কৌণিক উপায়ে ডিওএমকে কীভাবে পরিচালনা করা যায় তা শিখার জন্য দয়া করে প্রথমে অফিসিয়াল ট্যুর অফ হিরোস টিউটোরিয়ালটি দেখুন: https://angular.io/tutorial/toh-pt2 আপনার যদি ডিওএম স্তরক্রমের উচ্চতর উপাদানগুলিতে অ্যাক্সেসের প্রয়োজন হয় (বাবা-মা বা document body) অথবা নির্দেশনা পছন্দ অন্য কোন কারণে *ngIf, *ngFor, কাস্টম নির্দেশনা, পাইপ এবং মত অন্যান্য কৌণিক ইউটিলিটি [style.background], [class.myOwnCustomClass] আপনার চাহিদা পূরণ করছে না, ব্যবহার Renderer2: https://www.concretepage.com/angular-2/angular-4 -রেন্ডারার 2-উদাহরণ

Comments

আমি বুঝতে পারছি আপনি। তবে কীভাবে ডিওএম অ্যাক্সেস করবেন এবং কৌনিক ক্ষেত্রে এটি পরিবর্তন করুন। উদাহরণস্বরূপ $ ('। জেএস-এলোপেশন [ডেটা-আইডি =' + প্যারেন্টআইডি + ']') closest নিকটতম ('। প্রত্যেকটি লেভেল') after পরে (এইচটিএমএল); এটি কেবল কৌণিক দিয়ে কীভাবে করা যায়।

— প্রদীপ

অ্যাঙ্গুলারে @ প্রদীপ আপনি সাধারণত মূল এইচটিএমএল-ট্যাগ থেকে ডোমের অভ্যন্তরের উপাদানগুলি সন্ধান করতে শুরু করেন না, যদিও এটিও সম্ভব (কোনও উপাদানগুলির মধ্যে ডকুমেন্ট বা উইন্ডো উল্লেখ করে)। মডুলারাইজেশন (যার জন্য কৌণিকটি তৈরি করা হয়) আপনাকে আপনার অ্যাপ্লিকেশনটি এমনভাবে তৈরি করতে বাধ্য করে যাতে আপনি পিতা বা মাতা উপাদানগুলি থেকে কেবলমাত্র শিশু উপাদানগুলিকে ম্যানিপুলেট করেন। দীর্ঘমেয়াদে এ জাতীয় শ্রেণিবিন্যাস নির্ভরতা কোডের বিকাশ এবং রক্ষণাবেক্ষণকে আরও সহজ করে তোলে। সুতরাং আপনার বর্তমান উপাদানটির যে কোনও হোস্ট ডোম-উপাদান বা যে কোনও ভিউচিল্ড বা কনটেন্টচিল্ড এবং তাদের বাচ্চাদের হেরফের করার চেষ্টা করা উচিত।

— ফিল

@Pradeep সুতরাং যখন আপনি একটি উপাদান (একটি রেফারেন্স পেতে constructor(private renderer: Renderer2, private el: ElementRef) {}), আপনি তার শিশুদের জন্য হয় ফিল্টার বা উপাদান সরাসরি এটা nativeElement-প্রপার্টি অ্যাক্সেস করার মাধ্যমে নিপূণভাবে করতে পারেন: ngOnInit() { this.renderer.addClass(this.el.nativeElement, 'wild'); }। আপনাকে আরও কীভাবে বলতে হয় তার একটি টিউটোরিয়াল এখানে: alligator.io/angular/using-renderer2

— ফিল

@ প্রদীপ দয়া করে মনে রাখবেন যে রেন্ডারার 2 আপনার একমাত্র বিকল্প নয়। কৌণিক ক্ষেত্রে আপনি সরাসরি টেমপ্লেট থেকে ডিওএম চালনা করতে পারেন। উদাহরণস্বরূপ, বর্তমান উপাদান টেম্পলেট ভিতরে DOM উপাদানে সহজে সঙ্গে নিয়ে নাড়াচাড়া করা যেতে পারে *ngIf, *ngFor, কাস্টম, নির্দেশনা, পাইপ এবং CSS জন্য (দ্বারা আপনার তৈরি করা) ngClass, [style.background]এবং [class.myCustomCssClass]। আরও সহায়তার জন্য: কৌণিক.ইও

— ফিল

Answer 6

এটা চেষ্টা কর:

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

অথবা কৌণিক-ক্লিপ.জসনে স্ক্রিপ্টগুলি যুক্ত করুন:

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

এবং আপনার .ts ফাইলে:

declare var $: any;

Answer 7

আপনি আপনার jquery টাইপিং সংস্করণ আপডেট করতে পারেন

npm install --save @types/jquery@latest

আমারও একই ত্রুটি ছিল এবং আমি যদি 5 দিনের জন্য নেট সমাধানের জন্য সার্ফিং করি তবে এটি আমার পক্ষে কাজ করেছে এবং এটি আপনার পক্ষে কাজ করা উচিত

Answer 8

আপনার যদি অন্য লাইব্রেরিগুলি প্রকল্পে - টাইপসক্রিপ্ট - কেবল প্রকল্পগুলিতে নয় - কোণে ব্যবহার করার প্রয়োজন হয় তবে আপনি টিডিএসের (টাইপস্ক্রিপ্ট ডিক্লেয়ারেশন ফাইল) সন্ধান করতে পারেন যা বিশিষ্ট এবং পদ্ধতি, প্রকার, ফাংশন ইত্যাদির তথ্য রয়েছে, যা সাধারণত টাইপস্ক্রিপ্ট দ্বারা আমদানির প্রয়োজন ছাড়াই ব্যবহার করা যেতে পারে। ঘোষিত var হ'ল শেষ সংস্থান

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

Answer 9

আপনি webpack ব্যবহার করতে পারেন প্রদান করুন। এরপরে এটি স্বয়ংক্রিয়ভাবে ডিওএম ইনজেকশন করা হবে।

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

ব্যবহার করার চেষ্টা করুন - যাক যাক declare: যে কোনও;

বা 'jquery / dist / jquery.min.js' থেকে * হিসাবে আমদানি করুন; lib সঠিক পথ প্রদান

Answer 11

টাইপস্ক্রিপ্ট সমাধান:

ধাপ 1:

npm install jquery

npm install --save-dev @types/jquery

Step2: Angular.json যোগ:

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

বা সূচি মধ্যে। html যোগ করুন:

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

স্টিপি 3 : *। কম্পোনেন্ট.টিসে যেখানে আপনি জিকিউরি ব্যবহার করতে চান

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

তারপরে আপনি জাভাস্ক্রিপ্ট হিসাবে একই jquery ব্যবহার করতে পারেন। এইভাবে, ভিস্কোড টাইপস্ক্রিপ্ট দ্বারা স্বয়ংক্রিয় পরামর্শকে সমর্থন করে

Answer 12

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