Angular 4 ile jQuery Eklentisi nasıl kullanılır?

Açısal bir projede bir aralık kaydırıcısı kullanmak istiyorum ve açısal 4 için mevcut bir modülü kullanmayı denedim.

Derleme sırasında iyi çalışıyor ancak dağıtım için oluşturmaya çalıştığımda aşağıdaki hatayı atıyor.

JQuery eklentisini doğrudan açısal projede kullanma seçeneğini kontrol ettim ve yalnızca bunu Angular 2'de yapmak için seçenekler alıyorum.

Angular 4'te jQuery eklentilerini kullanmanın bir yolu var mı?

Lütfen bana haber ver.

Şimdiden teşekkürler!

Evet, Angular 4 ile jquery kullanabilirsiniz

Adımlar:

1) index.htmlEtikette aşağıdaki satıra girilir.

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

2) Aşağıdaki bileşen ts dosyasında, böyle bir var bildirmelisiniz

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

}

Ve bu kodu aşağıdaki gibi karşılık gelen html dosyası için kullanın:

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

Bu senin için çalışacak. Teşekkürler

Jquery'yi npm ile yükleyin

npm install jquery --save

Yazı ekle

npm install --save-dev @types/jquery

Angular-cli.json'a komut dosyaları ekleyin

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

Proje oluşturun ve sunun

ng build

Bu yardımcı olur umarım! Kodlamanın tadını çıkarın

JQuery'yi NPM Jquery NPM kullanarak kurun

npm install jquery

JQuery bildirim dosyasını yükleyin

npm install -D @types/jquery

JQuery'yi .ts içine içe aktarın

import * as $ from 'jquery';

sınıftan ara

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

@ Types / jquery'yi yüklerken herhangi bir jQuery değişkenini bildirmeniz gerekmez.

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

Her yerde jQuery'ye erişiminiz olmalıdır.

Aşağıdakiler çalışmalıdır:

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

Angular'da jQuery kullanmamalısınız. Mümkün olsa da (bu soru için diğer cevaplara bakın), cesareti kırılmıştır. Neden?

Angular, belleğinde DOM'un kendi temsilini tutar ve document.getElementById(id)jQuery gibi sorgu seçicileri (benzeri işlevler ) kullanmaz . Bunun yerine, tüm DOM manipülasyonu Renderer2 (ve arka planda / çerçeve kodunda bu Renderer2'ye erişen * ngFor ve * ngIf gibi Angular yönergeleri) tarafından yapılır. DOM'u jQuery ile kendiniz değiştirirseniz, er ya da geç ...

1. Senkronizasyon sorunları yaşayın ve ekranınızdan doğru zamanda yanlış görünen veya kaybolmayan şeyler var
2. Angular'ın dahili DOM temsili zone.js ve değişiklik algılama mekanizmasına bağlı olduğundan, daha karmaşık bileşenlerde performans sorunları yaşayın - bu nedenle DOM'u manuel olarak güncellemek, uygulamanızın üzerinde çalıştığı iş parçacığını her zaman engeller.
3. Kaynağını bilmediğiniz kafa karıştırıcı başka hatalar varsa.
4. Uygulamayı doğru bir şekilde test edememe (Jasmine, öğelerin ne zaman işlendiğini bilmenizi ister)
5. Angular Universal veya WebWorkers'ı kullanamama

Gerçekten jQuery'yi dahil etmek istiyorsanız (% 100 kesin olarak atacağınız bazı prototipleri kaydetmek için), npm install --save jquerygoogle CDN'den almak yerine en azından package.json'a eklemenizi öneririm .

TLDR: DOM'u Angular yolla nasıl işleyeceğinizi öğrenmek için lütfen önce resmi kahramanlar turu eğitimine göz atın: https://angular.io/tutorial/toh-pt2 DOM hiyerarşisinde daha üstteki öğelere erişmeniz gerekiyorsa (ebeveyn veya document body) ya da direktifler gibi başka bir nedenden dolayı *ngIf, *ngForözel direktifler, boru ve benzeri diğer açısal yardımcı programları [style.background], [class.myOwnCustomClass] ihtiyaçlarını karşılamak değil, kullanım Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-example

Bunu dene:

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

Veya angular-cli.json'a komut dosyaları ekleyin:

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

ve .ts dosyanızda:

declare var $: any;

Jquery yazma sürümünüzü şu şekilde güncelleyebilirsiniz:

npm install --save @types/jquery@latest

Aynı hatayı yaşadım ve 5 gün boyunca bir çözüm için internette geziniyordum. Benim için çalıştı ve senin için çalışmalı

Sadece projelerde değil, projelerde --typescript - diğer kitaplıkları kullanmanız gerekiyorsa, depares olan ve yöntem, tür, işlev vb. Bilgileri içeren tds'leri (TypeScript Bildirimi Dosyası) arayabilirsiniz. TypeScript tarafından, genellikle içe aktarmaya gerek kalmadan kullanılabilir. var bildirmek son kaynaktır

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

Bunu sağlamak için web paketini kullanabilirsiniz . Daha sonra DOM otomatik olarak enjekte edilecektir.

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

  ]
};

Kullanmayı deneyin - let $: any;

veya * 'jquery / dist / jquery.min.js'den $ olarak içe aktarın; kitaplığın tam yolunu sağlayın

dizginin çözümü:

Aşama 1:

npm install jquery

npm install --save-dev @types/jquery

step2: Angular.json'da şunu ekleyin:

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

veya index.html'de şunu ekleyin:

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

step3 : jquery kullanmak istediğiniz yerde * .component.ts içinde

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

Daha sonra jquery'yi javaScript ile aynı şekilde kullanabilirsiniz. Bu şekilde, VScode, Typescript ile otomatik öneriyi destekler

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