Як використовувати плагін jQuery з Angular 4?

Я хочу використовувати повзунок діапазону в кутовому проекті, і я спробував використовувати один доступний модуль для 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 у фоновому / фреймворк-коді). Якщо ви самі будете маніпулювати 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.

TLDR: Щоб дізнатись, як маніпулювати 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-приклад

Спробуйте це:

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

Ви можете використовувати веб-пакет для його надання . Потім він автоматично вводиться 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'
    }),

  ]
};

Спробуйте скористатися - оголосіть let $: any;

або імпортувати * як $ з 'jquery / dist / jquery.min.js'; забезпечити точний шлях ліб

рішення для машинопису:

Крок 1:

npm install jquery

npm install --save-dev @types/jquery

крок2 : у 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>

stepp3: у * .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')
        }
     })
}