Angular 4에서 jQuery 플러그인을 사용하는 방법은 무엇입니까?

각도 프로젝트에서 범위 슬라이더를 사용하고 싶은데 각도 4에 사용 가능한 모듈 하나를 사용해 보았습니다.

컴파일하는 동안 잘 작동하지만 배포를 위해 빌드하려고하면 아래 오류가 발생합니다.

Angular 프로젝트에서 직접 jQuery 플러그인을 사용하는 옵션을 확인했고 Angular 2에서만 옵션을 얻었습니다.

Angular 4에서 jQuery 플러그인을 사용할 수있는 방법이 있습니까?

알려주세요.

미리 감사드립니다!

예, Angular 4와 함께 jquery를 사용할 수 있습니다.

단계 :

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>

이것은 당신을 위해 작동합니다. 감사

npm으로 jquery 설치

npm install jquery --save

입력 추가

npm install --save-dev @types/jquery

angular-cli.json에 스크립트 추가

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

프로젝트 구축 및 제공

ng build

도움이 되었기를 바랍니다! 코딩 즐기기

NPM Jquery NPM을 사용하여 jQuery 설치

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

}

@ types / jquery를 설치할 때 jQuery 변수를 선언 할 필요가 없습니다.

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

어디서나 jQuery에 액세스 할 수 있어야합니다.

다음이 작동합니다.

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

Angular에서 jQuery를 사용해서는 안됩니다. 가능하지만 (이 질문에 대한 다른 답변 참조) 권장하지 않습니다. 왜?

Angular는 메모리에 DOM의 자체 표현을 보유하고 document.getElementById(id)jQuery 와 같은 쿼리 선택기 (와 같은 함수 )를 사용하지 않습니다 . 대신 모든 DOM 조작은 Renderer2 (및 * ngFor 및 * ngIf와 같은 Angular 지시문이 백그라운드 / 프레임 워크 코드에서 해당 Renderer2에 액세스)에 의해 수행됩니다. jQuery로 DOM을 직접 조작한다면 조만간 ...

1. 동기화 문제가 발생하고 화면에서 적절한 시간에 항목이 잘못 표시되거나 사라지지 않습니다.
2. Angular의 내부 DOM 표현이 zone.js 및 변경 감지 메커니즘에 바인딩되어 있기 때문에 더 복잡한 구성 요소에서 성능 문제가 있습니다. 따라서 DOM을 수동으로 업데이트하면 앱이 실행되는 스레드가 항상 차단됩니다.
3. 원인을 모르는 다른 혼란스러운 오류가 있습니다.
4. 애플리케이션을 올바르게 테스트 할 수 없음 (Jasmine에서는 요소가 렌더링 된시기를 알아야 함)
5. Angular Universal 또는 WebWorkers를 사용할 수 없음

정말로 jQuery를 포함하고 싶다면 (100 % 확실하게 버릴 프로토 타입을 덕 테이핑하기 위해), 적어도 npm install --save jqueryGoogle의 CDN에서 가져 오는 대신 package.json에 포함하는 것이 좋습니다 .

TLDR : Angular 방식으로 DOM을 조작하는 방법을 배우려면 먼저 공식적인 영웅 둘러보기 자습서를 참조하십시오 . 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'에서 *를 $로 가져옵니다. lib의 정확한 경로 제공

typescript에 대한 해결책 :

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>

3 단계 : jquery를 사용하려는 * .component.ts

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

그런 다음 javaScript와 동일한 jquery를 사용할 수 있습니다. 이런 식으로 VScode는 Typescript에 의한 자동 제안을 지원합니다.

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