[jquery] Angular와 함께 jQuery를 사용하는 방법은 무엇입니까?

이 간단한 단계를 따르십시오. 그것은 나를 위해 일했다. 혼란을 피하기 위해 새로운 각도 2 앱으로 시작할 수 있습니다. Angular cli를 사용하고 있습니다. 아직 설치하지 않은 경우 설치하십시오.
https://cli.angular.io/

1 단계 : 데모 각도 2 앱 만들기

ng new jquery-demo

어떤 이름이든 사용할 수 있습니다. 이제 cmd 아래에서 실행하여 작동하는지 확인하십시오 (이제 cd 명령을 사용하지 않으면 ‘jquery-demo’을 가리키고 있는지 확인하십시오)

ng serve

“앱이 작동합니다!”가 표시됩니다 브라우저에서.

2 단계 : Bower 설치 (웹용 패키지 관리자)

cli에서이 명령을 실행하십시오 (cd command를 사용하지 않으면 ‘jquery-demo’를 가리키고 있는지 확인하십시오).

npm i -g bower --save

이제 bower를 성공적으로 설치 한 후 아래 명령을 사용하여 ‘bower.json’파일을 작성하십시오.

bower init

입력을 요구할 것입니다. 기본값을 원하면 Enter 키를 누르십시오. 그리고 “Looks good?”이라고 물을 때 “Yes”를 입력하십시오.

이제 “jquery-demo”폴더에 새 파일 (bower.json)이 표시됩니다. https://bower.io/에서 자세한 정보를 찾을 수 있습니다.

3 단계 : jquery 설치

이 명령을 실행

bower install jquery --save

jquery 설치 폴더가 포함될 새 폴더 (bower_components)를 만듭니다. 이제 ‘bower_components’폴더에 jquery가 설치되었습니다.

4 단계 : ‘angular-cli.json’파일에 jquery 위치 추가

‘angular-cli.json’파일 ( ‘jquery-demo’폴더에 있음)을 열고 “scripts”에 jquery 위치를 추가하십시오. 다음과 같이 보일 것입니다 :

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

5 단계 : 테스트를위한 간단한 jquery 코드 작성

‘app.component.html’파일을 열고 간단한 코드 행을 추가하십시오. 파일은 다음과 같습니다.

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

이제 ‘app.component.ts’파일을 열고 ‘p’태그에 대한 jquery 변수 선언 및 코드를 추가하십시오. 라이프 사이클 후크 ngAfterViewInit ()도 사용해야합니다. 변경 후 파일은 다음과 같습니다.

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

이제 ‘ng serve’명령을 사용하여 각도 2 앱을 실행하고 테스트하십시오. 작동해야합니다.

답변

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}