我正在开发一个 Angular 项目 (ng-version=4.4.6)。我需要一张无需连接即可工作的 map 。我想尝试 jvectormap。显示了 Angular.js 的文档和我找到的每个示例。由于我对 Angular 没有太多的经验,所以我不知道如何实现这个库并在我的项目中使用它。
有人在项目中使用过它并且可以告诉我方法吗?
谢谢
最佳答案
您应该包含 jQuery 和 jVectorMap 文件,就像在您的 index.html 中的官方文档中描述的那样
然后在你的组件中,你必须通过 @Component
装饰器来声明 jQuery。
declare var jQuery: any;
然后你可以通过示例在ngAfterViewInit()
里面添加这段代码
ngAfterViewInit(){
jQuery('#world-map').vectorMap();
}
在组件 html 文件中添加此内容
<div id="world-map" style="width: 600px; height: 400px"></div>
在你的index.html中
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="056f736066716a7768647545372b352b31" rel="noreferrer noopener nofollow">[email protected]</a>/jquery-jvectormap.css"></link
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9839f8c8a9d869b848899a9dbc7d9c7dd" rel="noreferrer noopener nofollow">[email protected]</a>/jquery-jvectormap.min.js"></script>
问题是,通过 typescript 的 Angular 2,您可以轻松使用 jQuery 或纯 JS
关于angular - 如何在 Angular 中实现 jVectorMap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47717464/