Question

我有一个与JS库交互的组件：

@NgComponent（选择器：'mapcomp'， templateUrl：'packages / org_rtosm_update / map / 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资源创建独立组件的最佳方法是什么？

感谢。

Answer 1

您的具体问题是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

在ngComponent html模板中导入js文件

1 个答案: