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

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

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

컴파일 중에는 정상적으로 작동하지만 배포를 위해 빌드하려고 하면 아래와 같은 오류가 발생합니다.

저는 앵글 프로젝트에서 jQuery 플러그인을 직접 사용하는 옵션을 확인했고 앵글 2에서만 가능한 옵션을 받고 있습니다.

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

저에게 알려주세요.

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

네, 앵귤러 4와 함께 jquery를 사용할 수 있습니다.

단계:

index.html아래 줄을 태그에 넣습니다.

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

아래 구성 요소 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을 사용하여 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를 사용하면 안 됩니다.가능하지만(이 질문에 대한 다른 답변 참조) 권장되지 않습니다. 이유는 무엇입니까?

쿼리 메에의 ▁angularctions▁like-▁angular의fun▁(ors않습니select다▁query는▁holds▁doesn▁and▁an지와 같은 함수)를 사용하지 document.getElementById(id)j처럼쿼리입니다.대신 모든 DOM 조작은 Renderer2에 의해 수행됩니다(그리고 배경/프레임워크 코드에서 Renderer2에 액세스하는 경우 *ngFor 및 *ngIf와 같은 Angular 명령어).당신이 직접 jQuery로 DOM을 조작한다면 조만간...

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

만약 당신이 정말로 jQuery를 포함하고 싶다면 (100% 확실하게 버릴 일부 프로토타입을 오리 두드리는 것을 위해) 적어도 당신의 패키지에 포함하는 것을 추천합니다.와의 관계.npm install --save jquery구글의 CDN에서 얻는 대신에.

TLDR: Angular 방식으로 DOM을 조작하는 방법을 배우려면 먼저 공식 영웅 투어 튜토리얼을 진행하십시오: https://angular.io/tutorial/toh-pt2 DOM 계층 구조에서 상위 요소에 액세스해야 할 경우(부모 또는document body) 또는 같은 다른 이유로 지시합니다.*ngIf,*ngFor사용자 지정 지침, 파이프 및 기타 각도 유틸리티[style.background],[class.myOwnCustomClass]당신의 요구를 만족시키지 말고 렌더러2: 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

저도 같은 오류가 있었고 solution.it 가 저에게 효과가 있는지 5일 동안 인터넷 서핑을 했습니다. 그리고 그것이 당신에게 효과가 있을 것입니다.

프로젝트에서 다른 라이브러리(프로젝트에서만 사용하는 것이 아니라 프로젝트에서 다른 라이브러리(유형 스크립트 - 각도 -)를 사용해야 하는 경우, 부족하고 TypeScript에서 사용할 수 있는 메서드, 유형, 함수 등의 정보가 있는 tds(유형 스크립트 선언 파일)를 찾을 수 있습니다. 일반적으로 가져올 필요 없이 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'
    }),

  ]
};

유형 스크립트에 대한 솔루션:

1단계:

npm install jquery

npm install --save-dev @types/jquery

2단계: Angular.json에서 다음을 추가합니다.

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

또는 index.dll에 추가:

<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 $"

그러면 jquery를 javaScript와 동일하게 사용할 수 있습니다.이러한 방식으로 VScode는 유형 스크립트별 자동 제안을 지원합니다.

-declarlet $:any;를 사용해 보십시오.

또는 *를 'jquery/dist/jquery.min.js'에서 $로 가져오십시오. lib의 정확한 경로를 제공합니다.

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

언급URL : https://stackoverflow.com/questions/43934727/how-to-use-jquery-plugin-with-angular-4