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

Ответ 1

Да, вы можете использовать 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>

Это будет работать для вас. Спасибо

Ответ 2

Установите 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

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

Ответ 3

Установка 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');
        });
    }

}

Ответ 4

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

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

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

Попробуйте следующее:

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

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

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

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

declare var $: any;

Ответ 7

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

npm install --save @types/[email protected]

У меня была такая же ошибка, и я был на том, если на 5 дней занимаюсь серфингом в сети для решения. Я работал для меня, и он должен работать для вас

Ответ 8

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

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

Ответ 9

Вы можете использовать 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'
    }),

  ]
};

Ответ 10

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

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

Ответ 11

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