Angular 2 구성 요소에서 JQuery 메서드 호출

Question

이전에 JQuery를 사용했던 기존 프로젝트에서 Angular 2 프런트 엔드를 만드는 중입니다. JQuery 함수가 별도의 파일에있을 때 Angular 2 구성 요소 내부에서 JQuery 메서드를 호출 할 수 있습니까? 중요한 경우에 대비하여 TypeScript에서 구성 요소를 작성하고 있습니다.

예를 들어 editCheckBoxes()이라는 메서드로 EditCheckBoxes.js라는 JavaScript 파일이 있습니다. editCheckBoxes()이 작동하려면 특정 구성 요소가 시작된 후에 호출해야합니다.

Cannot find name 'editCheckBoxes'.

나는이 작업을 얻을 수있는 방법이 있나요 :

ngOnInit(): void { 
    editCheckBoxes(); 
} 

이 코드는 나에게 다음과 같은 오류를 제공합니다 : 나의 시도 솔루션이 있었다?

또한 구성 파일에 declare var $: any;을 추가 했으므로 해당 구성 요소 내에서 JQuery를 사용할 수 있지만 전체 구성 요소에 전체 파일을 복사하지 말고 사용하려고합니다.

편집 : 폴더 구조는 다음과 같습니다

는

: 당신은 당신의 타이프에 editCheckboxes 방법을 가져와야 import { editCheckboxes } from '../../Scripts/EditCheckboxes';

Answer 1

:

내 구성 요소에서

Plan 
    app 
     selling 
     My Angular 2 component 
    Scripts 
     EditCheckBoxes.js 

가져 오기 한 Statment은 다음과 같습니다 파일을 사용할 수 있습니다.

먼저 당신은 단지 그것을 호출 할 수 있습니다

이제

import { editCheckBoxes } from './EditCheckBoxes'; 

구성 요소 내에서 그 기능을 가져와야합니다 다음

export function editCheckboxes() { ... } 

EditCheckBoxes.js

에서 editCheckboxes 기능을 내보낼 필요가 수행하여 구성 요소 : editCheckBoxes();

Answer 2

js 파일에서 함수를 가져 오려면 먼저 다음과 같이 내보내기해야합니다.

// EditCheckBoxes.js 
module.exports = function editCheckBoxes() { ... }; 

다음, 다음 타이프 라이터 파일에 당신이 당신의 정의 파일을 지정합니다 타이프 라이터

// EditCheckBoxes.d.ts 
declare function editCheckBoxes(): void; 
export = editCheckBoxes; 

에 의해 사용되는 모듈의 정의와의 js 파일과 동일한 디렉토리에 d.ts 파일을 추가 그래서처럼 함수를 가져 와서 사용

/// <reference path="../../Scripts/EditCheckBoxes.d.ts" /> 
import editCheckBoxes = require('../../Scripts/EditCheckBoxes'); 

ngOnInit(): void { 
    editCheckBoxes(); 
}