2014-04-01 25 views
0

我與JS庫進行交互組件:進口的js文件

@NgComponent( 選擇: 'mapcomp', templateUrl: '包/ org_rtosm_update /地圖/ map.html', cssUrl:'packages/org_rtosm_update/map/map.css', publishAs:'mapComponent') class MapComponent { final map = new js.Proxy(js.context.OpenLayers.Map,「map」);

當我包括在HTML模板文件這樣的JS庫:

<script src="packages/browser/interop.js"></script> 
<script type="text/javascript"src="http://openlayers.org/dev/OpenLayers.js"></script> 
<h3>Maps</h3> 
<div id="map" class="smallmap"></div> 

我有代理錯誤:

Class 'Proxy' has no instance getter 'OpenLayers'. NoSuchMethodError: method not found: 'OpenLayers' Receiver: Instance of 'Proxy' Arguments: [] STACKTRACE: #0 
Object.noSuchMethod (dart:core-patch/object_patch.dart:45) #1 
Proxy.noSuchMethod (package:js/js.dart:222:27) #2 
MapComponent.MapComponent (package:org_rtosm_update/map/map_component.dart:15:39) #3 
_LocalClassMirror._invokeConstructor (dart:mirrors-patch/mirrors_impl.dart:873) #4 
_LocalClassMirror.newInstance (dart:mirrors-patch/mirrors_impl.dart:789) #5 
DynamicInjector.newInstanceOf (package:di/dynamic_injector.dart:64:35) #6 
_TypeProvider.get (package:di/module.dart:151:29) #7 
Injector._getInstanceByKey (package:di/injector.dart:116:27) #8 
Injector._getInstanceByKey (package:di/injector.dart:120:7) #9 
Injector.get (package:di/injector.dart:170:24) #10 
_ComponentFactory.call (package:angular/core_dom/view_factory.dart:213:68) 

什麼是有獨立的組件與JS資源的最佳方法是什麼?

謝謝。

回答

0

您的具體問題是調用js.context.OpenLayers.Map來訪問JSObjects上的屬性,使用[]運算符。例如js.context [ '的OpenLayers'] [ '地圖'。

使用js-interop可以工作,但它不是很健壯,你會花很多時間通過Dart寫Javascript,這不是很有趣。

更好的方法是將外部Javascript庫包裝在Dart庫中。看看@ a14n的包裝生成器:https://github.com/a14n/dart-js-wrapping-generator它用於生成Google Map綁定:https://github.com/a14n/dart-google-maps