[JQUERY] 어떻게 각도 4 jQuery를 플러그인을 사용 하는가?

어떻게 각도 4 jQuery를 플러그인을 사용 하는가?

해결법

1. ---

   1.예는 각도 4 JQuery와 사용할 수 있습니다

   예는 각도 4 JQuery와 사용할 수 있습니다

   단계 :

   1) index.html을 태그의 선 아래에 넣어.

   <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">

   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. ---

   2.NPM과 JQuery와 설치

   NPM과 JQuery와 설치

   npm install jquery --save
   

   추가 typings

   npm install --save-dev @types/jquery
   

   각-cli.json에 스크립트를 추가

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

   프로젝트를 빌드 봉사

   ng build
   

   도움이 되었기를 바랍니다! 코딩을 즐길 수 있습니다

3. ---

   3.jQuery를이 NPM을 사용하여 설치 JQuery와 NPM

   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. ---

   4.당신은 당신이 유형 / JQuery와 @ 설치로 어떤 jQuery를 변수를 선언 할 필요가 없습니다.

   당신은 당신이 유형 / JQuery와 @ 설치로 어떤 jQuery를 변수를 선언 할 필요가 없습니다.

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

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

   다음은 작동합니다 :

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

5. ---

   5.당신은 각도에 jQuery를 사용하면 안됩니다. 이 수는 있지만 (이 질문에 대한 다른 답변을 참조), 그것은 좋습니다. 왜?

   당신은 각도에 jQuery를 사용하면 안됩니다. 이 수는 있지만 (이 질문에 대한 다른 답변을 참조), 그것은 좋습니다. 왜?

   각도는 메모리에 DOM의 자신의 표현을 보유하고 있으며 jQuery를 같은 (document.getElementById를 (ID)와 같은 기능) 쿼리 선택기를 사용하지 않습니다. 대신 모든 DOM-조작이 Renderer2에 의해 이루어집니다 (그리고 * ngFor 같은 각도-지침과 * ngIf 접근이 Renderer2 배경 / 프레임 워크 코드에서). 당신이 jQuery를 함께 DOM을 조작 할 경우 자신 당신은 조만간 것입니다 ...

   당신이 정말로 jQuery를 포함 할 경우 (당신은 100 % 던져 확실히 할 몇 가지 프로토 타입을 오리 테이핑), 내가 대신 구글의 CDN에서 그것을 얻는 --save jQuery를 설치 이상이 NPM과의 package.json에 포함에 추천 .

6. ---

   6.이 시도:

   이 시도:

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

   또는 각-cli.json에 스크립트를 추가 :

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

   당신의 .TS 파일 :

   declare var $: any;
   

7. ---

   7.당신은 너무처럼 JQuery와 typings 버전을 업데이트 할 수 있습니다

   당신은 너무처럼 JQuery와 typings 버전을 업데이트 할 수 있습니다

   npm install --save @types/jquery@latest
   

   나는이 같은 오류를했고 나는 나를 위해 일한 solution.it에 대한 인터넷 서핑 경우 5 일에서 봤는데 그것은 당신을 위해 일한다

8. ---

   8.각도 - - 당신은 단지 프로젝트에 --typescript-- 프로젝트에 다른 라이브러리를 사용할 필요가 있다면 당신이 볼 수 depares있는 등 방법, 종류, 기능, 정보를 가질 수 TDS의 (타이프 선언 파일) 이는 일반적으로 가져올 필요없이, 타이프 라이터로 사용할 수 있습니다. 선언 VAR는 마지막 자원이다

   각도 - - 당신은 단지 프로젝트에 --typescript-- 프로젝트에 다른 라이브러리를 사용할 필요가 있다면 당신이 볼 수 depares있는 등 방법, 종류, 기능, 정보를 가질 수 TDS의 (타이프 선언 파일) 이는 일반적으로 가져올 필요없이, 타이프 라이터로 사용할 수 있습니다. 선언 VAR는 마지막 자원이다

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

9. ---

   9.당신은 그것을 제공하기 위해 웹팩 사용할 수 있습니다. 그러므로 자동 DOM을 주입한다.

   당신은 그것을 제공하기 위해 웹팩 사용할 수 있습니다. 그러므로 자동 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. ---

    10.사용해보십시오 - 선언은 $하자 어떤;

    사용해보십시오 - 선언은 $하자 어떤;

    또는 수입 * $로부터 'JQuery와 / DIST / jquery.min.js'; lib 디렉토리의 정확한 경로를 제공

11. ---

    11.타이프 스크립트에 대한 해결책 :

    타이프 스크립트에 대한 해결책 :

    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>
    

    STEP3 : 당신이 jQuery를 사용하려면 * .component.ts에서

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

    그런 다음 자바 스크립트와 동일 JQuery와 사용할 수 있습니다. 이 방법은 VScode은 타이프 라이터로 자동 제안을 지원합니다

12. ---

    12.

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

from https://stackoverflow.com/questions/43934727/how-to-use-jquery-plugin-with-angular-4 by cc-by-sa and MIT license