Как использовать плагин jQuery с Angular 4?

Я хочу использовать ползунок диапазона в проекте angular, и я попытался использовать один доступный модуль для angular 4.

Он отлично работает во время компиляции, но когда я пытаюсь собрать его для развертывания, он выдает следующую ошибку.

Я проверил возможность использования плагина jQuery непосредственно в проекте angular, и у меня есть варианты для этого только в Angular 2.

Есть ли способ использовать плагины jQuery в Angular 4?

Пожалуйста, дайте мне знать.

Заранее спасибо!

Да, вы можете использовать jquery с Angular 4

Шаги:

1) index.htmlВведите строку ниже в теге.

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

2) В файле компонента ts ниже вы должны объявить var следующим образом

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

}

И используйте этот код для соответствующего html файла следующим образом:

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

Это сработает для вас. Благодарность

Установите jquery с помощью npm

npm install jquery --save

Добавить типизацию

npm install --save-dev @types/jquery

Добавить скрипты в angular-cli.json

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

Создавайте проект и обслуживайте

ng build

Надеюсь это поможет! Наслаждайтесь кодированием

Установите jQuery с помощью NPM JQuery NPM

npm install jquery

Установите файл объявления jQuery

npm install -D @types/jquery

Импортировать jQuery внутрь .ts

import * as $ from 'jquery';

вызов внутри класса

export class JqueryComponent implements OnInit {

constructor() {
}

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

}

Вам не нужно объявлять какую-либо переменную jQuery при установке @ types / jquery.

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

У вас должен быть доступ к jQuery везде.

Следующее должно работать:

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

Вы не должны использовать jQuery в Angular. Хотя это возможно (см. Другие ответы на этот вопрос), это не рекомендуется. Зачем?

Angular хранит собственное представление DOM в своей памяти и не использует селекторы запросов (например, функции document.getElementById(id)), такие как jQuery. Вместо этого все DOM-манипуляции выполняются Renderer2 (и Angular-директивами, такими как * ngFor и * ngIf, обращающимися к этому Renderer2 в фоновом / framework-коде). Если вы сами манипулируете DOM с помощью jQuery, вы рано или поздно ...

1. Возникли проблемы с синхронизацией, и что-то неправильно отображалось или не исчезало в нужный момент с экрана
2. Имеют проблемы с производительностью в более сложных компонентах, поскольку внутреннее DOM-представление Angular привязано к zone.js и его механизму обнаружения изменений, поэтому обновление DOM вручную всегда будет блокировать поток, в котором выполняется ваше приложение.
3. Есть другие сбивающие с толку ошибки, происхождение которых вы не знаете.
4. Невозможность правильно протестировать приложение (Жасмин требует, чтобы вы знали, когда элементы были отрисованы)
5. Невозможно использовать Angular Universal или WebWorkers

Если вы действительно хотите включить jQuery (для утиной записи какого-нибудь прототипа, который вы на 100% окончательно выбросите), я рекомендую хотя бы включить его в свой package.json npm install --save jqueryвместо того, чтобы получать его из CDN Google.

TL; DR: чтобы узнать, как управлять DOM с помощью Angular, сначала просмотрите официальный учебник по героям: https://angular.io/tutorial/toh-pt2 Если вам нужен доступ к элементам выше в иерархии DOM (родитель или document body) или по какой другой причине директивы как *ngIf, *ngFor, пользовательские директивы, труба и другие угловые утилиты , такие как [style.background], [class.myOwnCustomClass] не удовлетворяют ваши потребности, использование Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-example

Попробуй это:

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

Или добавьте скрипты в angular-cli.json:

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

и в вашем файле .ts:

declare var $: any;

Вы можете обновить свою версию типизации jquery так:

npm install --save @types/jquery@latest

У меня была такая же ошибка, и я был в течение 5 дней, просматривая сеть в поисках решения. Это сработало для меня, и оно должно сработать для вас

Если у вас есть необходимость использовать другие библиотеки в проектах --typescript - а не только в проектах - angle - вы можете найти tds (файл декларации TypeScript), которые удалены и содержат информацию о методах, типах, функциях и т. Д., который может использоваться TypeScript, обычно без необходимости импорта. объявить var - последний ресурс

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

Вы можете использовать webpack для его предоставления . Затем он будет автоматически внедрен в DOM.

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

  ]
};

Попробуйте использовать - declare let $: any;

или импортировать * как $ из 'jquery / dist / jquery.min.js'; укажите точный путь к библиотеке

решение машинописного текста:

Шаг 1:

npm install jquery

npm install --save-dev @types/jquery

step2: в Angular.json добавьте:

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

или в index.html добавьте:

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

step3: в * .component.ts, где вы хотите использовать jquery

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

Затем вы можете использовать jquery так же, как javaScript. Таким образом, VScode поддерживает автоматическое предложение с помощью Typescript.

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