앵귤러 2 프로젝트에서 javascript 파일을 호출하는 중

Question

저는 앵귤러 2 프로젝트에서 사용하고 싶은 jQuery에서 캘린더 컨트롤을 작성했습니다.

이 주제에 대한 다른 답변을 통해 jQuery의 getScript API를 사용하여 외부 자바 스크립트 파일을 호출 할 수 있음을 알게되었습니다.

내 calendar.component.ts은 다음과 같습니다

import { Component, OnInit, AfterViewInit }  from '@angular/core'; 
import { Auth }         from '../auth.service'; 

declare var $:any; 
declare var CustomCal:any; 

@Component({ 
    selector:  'app-calendar', 
    templateUrl: './calendar.component.html', 
    styleUrls:  ['./calendar.component.css'] 
}) 
export class CalendarComponent implements OnInit { 

    private year : number; 
    myCal : any; 

    constructor(private auth : Auth) { 
    } 

    ngOnInit() { 
    } 

    ngAfterViewInit() { 
     this.year = 2017; 

     $.getScript('./app/calendar/zapCalendar.js', function(){ 
      console.log("got call'd back"); 
      this.myCal = new CustomCal(2017); 
     }); 
    } 
} 

나는 콘솔 메시지가 "다시 call'd있어", 다음 CustomCal가 정의되어 있지 않은 없다는 오류 메시지가 표시됩니다. 추가하여 zapCalendar.js에 다음 나는 zapCalendar.js 파일에 클래스를 export'ing 시도했습니다

class CustomCal 
{ 
    constructor(nYear) { 

     this._mouseDown  = false; 
     this._mouseDrag  = false; 

     this._lastItem  = 0; 
     this._nYear   = nYear; 

     this.CreateCalendarFrame(); 
     this.AddEventHandlers(this); 
    } 

    ... 
} 

, 또한 시도 :

내 CustomCal 클래스는 다음과 같이 zapCalendar.js에 정의되어있다 파일 :

$(function() { 
    var myCal = new CustomCal(2017); 
}); 

무엇이 여기에 있습니까? 감사

업데이트 :

var x = new CustomCal(2017); 

을 이제 달력이 제대로 렌더링된다 난 그냥이와

$(function() { 
    var myCal = new CustomCal(2017); 
}); 

(zapCalendar.js에서)이 교체했습니다. 그러나 나는 (가능하다면) 나의 타이프 스크립트에서 달력에 대한 참조를 얻고 싶다. 이것이 가능한가? 이 개체에 바인딩 호출되지 않습니다 때문에

Answer 1

$.getScript('./app/calendar/zapCalendar.js', function(){ 
     console.log("got call'd back"); 
     this.myCal = new CustomCal(2017); 
    }); 

여기에 내부 기능은 동일 this 참조 할 수 없습니다. TypeScript를 사용하고 있으므로 화살표 기능을 사용하여이 동작을 변경할 수 있습니다.

$.getScript('./app/calendar/zapCalendar.js',() => { 
     console.log("got call'd back"); 
     this.myCal = new CustomCal(2017); 
    }); 

Answer 2

당신이 그것에 대해

import {CustomCal} from "./app/calendar/zapCalendar";