我有一个纯 JavaScript 库,用户可以通过 npm 安装。我想向这个库添加/创建一个 Angular“包装器”,以便它可以在 Angular 项目中无缝使用,但我不知道如何做到这一点。我正在使用 Angular-cli v6。
这与 How does one go about creating an Angular library wrapper for an existing Javascript library? 非常相似,但是唯一的响应是指向 ng-packagr 的链接。我已经完成了一些关于使用 ng-packagr 创建库的教程,但是它们没有描述(而且我在其他地方找不到示例)如何围绕非 Angular JS 库创建包装器。
任何帮助是极大的赞赏! :)
最佳答案
一个老问题,但我喜欢它。没有一个简单的答案,所以我是这样做的:
精简版
Read about the internals and how I wrapped the Google Maps Javascript API library
长版
The following is very abstract, but this is an abstract question, so here goes...
您可能需要实现的基本内容是:
NgZone
切换执行进出 Angular . 其他考虑因素可能是性能、可伸缩性、在现有工具上添加新工具等。无论您处理的是什么库,您最终都可能将函数与函数、类与类、模块与模块等
问题出现了:“我应该手动编写所有代码吗?我真的要为每个 native 方法编写一个方法吗??当 native 库更改实现时会发生什么?我将不得不在任何地方更改我的代码......🤔 "
为了简化和使您的包装库可扩展,您可以自动化包装机制(一种方法是使用 Javascript
Proxy
)对象。将它与 TypeScript 的实用程序类型和扩展接口(interface)相结合,您可以创建一个自动将调用委托(delegate)给相关 native 对象/函数的类,并且您将获得智能感知(对于您不需要在包装器中手动实现的方法! )。
Here's a more detailed explanation with examples
对于事件委托(delegate),您可以创建一种机制来为您的 native 事件生成可观察对象(或 EventEmitters)。
在某些情况下,您应该考虑使用
NgZone.runOutsideAngular()
以防止对在 native 库中执行的代码运行不必要的更改检测。另一方面,您应该考虑使用 NgZone.run()
在运行应进入并影响更改检测周期的 native 代码时将执行带入 Angular 的区域。我的 Angular 谷歌地图库是开源的,你可以看看。我在其中实现了一些非常有趣的架构机制。
欢迎任何遇到此帖子并需要更多详细信息或帮助的人与我联系。
干杯🥂
关于javascript - 如何围绕现有的 Javascript 库创建 Angular 包装器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51849952/