javascript 및 viceversa에서 typescript를 호출하십시오.

여기에 문제가 있습니다 ... 나는 angular2 프로젝트에서 사용할 수 있도록 d.ts 파일이있는 라이브러리를 처음 만들었지 만, d.ts는 없습니다. 일부 다른 것들과 opensource 저장소의 라이브러리가 완전하지 않거나 사용하고자하는 .js 라이브러리의 최신 버전을 위해 업데이트되지 않습니다.javascript 및 viceversa에서 typescript를 호출하십시오.

그래서 같은 동작을 시도하고 싶지만 반대 방향으로, angular2로 인한 몇 가지 제약이 있습니다 ... 저는 HTML 페이지에 javascript를 직접 포함시킬 수 있으며, angular2 환경은 항상 트리거됩니다.

는 당신이 더 알아 보았 그래서 제가 몇 가지 코드를 게시하자

<html> 
<head> 
<title>Angular 2 QuickStart</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="styles.css"> 
<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js" charset="utf-8"></script> 
<script src="systemjs.config.js"></script> 
<script> 
System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 
<body> 
<my-app>Loading...</my-app> 
<!-- Here my custom javascript that will create some controls under body--> 
<script> 
<!-- this script will create some custom controls--> 
</script> 
</body> 
</html>

을 그래서 당신은 각 구성하고 alwasys뿐만 아니라 실행됩니다 자바 스크립트 내 사용자 지정으로로드됩니다 볼 수있다.

나는 angular2 부품/모듈

어떤 아이디어가 있는 페이지의 하단에 그 자바 스크립트에서 통신하려는

?????????

이상하게 생각하는 부분은 내 json을 저장하고 구성 요소/모듈과 comunicate하는 데 사용되는 숨겨진 div를 만드는 것입니다 ... 더러워 지지만 더 좋은 아이디어를 가질 수 있습니다 !!!!!!

출처

2016-09-05 Jherzon Franz Nava Rojas

포함하려는 자바 스크립트는 구성 요소에서 액세스하려는 클래스/기능을 정의합니다. 아니면 적극적으로 "수행"하는 스크립트입니까? – BeetleJuice

당신은 어떤 문제인지 이해하지 못합니다. 귀하의 질문을 명확하게하기 위해 다시 말하십시오. – Alex

@BeetleJuice는 실제로 전체 라이브러리, Google지도 라이브러리입니다. (어떤 몸은 말할 것입니다) "하지만 Angule2-google-maps는 왜 사용되지 않습니까?"라는 간단한 이유 때문에 버그가 있으며 Google 인증을받지 못했습니다. 하지만 귀하의 질문에 의해 내가 typescript에서 사용할 수 있도록 자신을 정의 파일을 제안하는 것 같아 ??? 그러나이 거대한 도서관들에게는 너무 많은 시간이 걸릴 것입니다 : ......... (.... –

내가 그래서 여기에 코드를 업데이트 didnt't 솔루션입니다 죄송합니다 : 당신은 angular2에 comunicate 수 글로벌 범위에서 콜백을 등록하는 것은, 자바 스크립트로 타이프 스크립트 구성 요소에서 업데이트 우리 쉽게 그냥 전역 범위에 등록 인이 콜백을 호출하지만, angular2 구성 요소를 업데이트하기 위해 자바 스크립트에서 콜백을 호출하면 조금 까다 롭습니다하지만 난 여기에 구성 요소의 귀족 당신을 떠나지 : sendMessage 첨부는 계산에

이

export class MyComponent { 
    selectedData: any; 

    constructor(private _ngZone: NgZone, 
     private elementRef: ElementRef) { 
     this.title = this.companyName; 
    } 

    public updateDataAction = (data: any) => { 
     this._ngZone.runOutsideAngular(() => { 
      this._ngZone.run(() => { 
       this.selectedData = data[0].value[3]; 
      }); 
     }) 
    }; 

    ngAfterViewInit() { 
     sendMessage(this.updateDataAction); 
    } 
}

테이크 전역 메서드, 나는 전역 범위에 등록 된 것을 의미합니다. 물론 당신은 정의를 추가해야합니다. n d.ts 파일에서 은 다음과 같습니다 :

declare function sendMessage (콜백 : ((message : string) => void)) : void;

아름답지 않아? 예술 작품

출처

2016-09-28 19:19:54

Google지도 웹 구성 요소를 사용하십시오. https://github.com/GoogleWebComponents/google-map Angular2는 웹 구성 요소를 염두에두고 만들었습니다. 웹 구성 요소의 힘은 모든 프레임 워크, 도구 세트 또는 일반 자바 스크립트에서 액세스 할 수있는 인터페이스를 노출한다는 것입니다. 여기

는 Angular2 내에서 매핑 웹 구성 요소를 사용하는 예입니다 https://technology.amis.nl/2016/02/10/how-to-use-polymer-webcomponents-in-angular2/

업데이트

또는 당신이 정말로 필요로하는 경우 만하여 window.google.maps.Map 객체를 반환하는 공급자를 만들 자바 스크립트 API Google지도 구성 요소 나 서비스에서 직접 호출 할 수 있습니다.

또 다른 옵션은 바로이 패키지를 사용하는 것입니다 https://www.npmjs.com/package/google-maps

출처

2016-09-06 12:48:55 Martin

먼저 Angular2 rc6으로 실패한 예제를 시도해보십시오. Google지도 라이브러리는 Bower 심지어 종이 버튼까지 사용하여로드 할 수 없습니다. :( –

Jherzon을, 나는 도서관 차트 타사을 통합하는 방법을 설명 할 것이다. 다행히 그것이 당신을 도울 것입니다. packages.json에서 dependencies에서

추가 라이브러리 : 당신의 라이브러리와 주요 객체 클래스에 대한 참조를 대체합니다. 덧붙여서 "chart.js": "2.2.1"
을 실행하여 NPM 모듈로 라이브러리를 설치하십시오.
라이브러리를 SystemJS 패키지에 추가하십시오. 다음은 내 systemjs.config.js의 발췌 부분입니다.

입니다.

// map tells the System loader where to look for things 
var map = { 
    'app':      'dist', 
    'rxjs':      'node_modules/rxjs', 
    '@angular':     'node_modules/@angular', 
    'chart.js':     'node_modules/chart.js/dist', 
}; 
// In packages, add a reference to the JS file with the 3rd party lib 
var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'chart.js':     {main:'Chart.js', defaultExtension: 'js'}, 
};

라이브러리와 더 타이프 라이터 정의 파일이 없기 때문에, 컴파일러는 사방에 오류가 발생합니다. 그래서 custom.typings.d.ts이라는 파일을 추가했습니다.여기에는 아래 줄이 있습니다 (Chart을 타사 라이브러리의 주 객체 클래스로 바꾸십시오) :

declare var Chart:any;

는 그리고, 그 파일에 대한 참조를 추가, 그래서 타이프는 선언을보고 나는 방법과 객체 클래스의 속성에 액세스 할 때 불평하지 않습니다. main.ts에 내가 가지고 :

///<reference path="./path/to/custom.typings.d.ts"/>

는 일단 모든 설정입니다 : 차트를 사용하는 모든 구성 요소에서 내가 라이브러리를 가져올 나는 것와 다른 클래스 의존성 :

import 'chart.js'; //replace with the SystemJS's map property name used above

경로는 다를 수 있지만 기본적으로 내 설정입니다. 이제 원하는대로 라이브러리를 사용하십시오. 나에게는이었다

이

let oChart = new Chart(this.chartOptions);

출처

2016-09-07 12:51:45 BeetleJuice

javascript 및 viceversa에서 typescript를 호출하십시오.

답변

관련 문제