如何围绕现有的Javascript库创建Angular包装器？

Question

我有一个纯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库创建包装器。

任何帮助将不胜感激！ ：）

Answer 1

一个老问题，但我喜欢它。没有一个简单的答案，所以我是这样做的：

短版

Read about the internals and how I wrapped the Google Maps Javascript API library

长版

<块引用>

下面很抽象，但这是一个抽象的问题，所以这里......

您可能需要实现的基本内容是：

1. 检测 Angular 库中的更改并将其委托给本机库。
2. 检测原生事件并将它们冒泡到您的 Angular 库中。
3. 使用 NgZone 在 Angular 内外切换执行。

其他考虑因素可能是性能、可扩展性、在现有工具上添加新工具等。无论您正在处理什么库，您最终都可能会用函数包装一个函数，用一个类包装一个类，带有模块的模块等

问题出现了：“我应该手动编写所有代码吗？我真的要为每个本机方法编写一个方法吗？当本机库更改实现时会发生什么？我必须在任何地方更改我的代码。 ..?”

为了简化和使您的包装库具有可扩展性，您可以自动化包装机制（一种方法是使用 Javascript Proxy）对象。 将它与 TypeScript 的实用程序类型和扩展接口相结合，您可以创建一个自动将调用委托给相关本机对象/函数的类，并且您将获得智能感知（对于您不需要在包装器中手动实现的方法！ ).

Here's a more detailed explanation with examples

对于事件委托，您可以创建一种机制，为您的原生事件生成 observable（或 EventEmitter）。

在某些情况下，您应该考虑使用 NgZone.runOutsideAngular() 来防止对在本机库中执行的代码运行不必要的更改检测。另一方面，在运行应该进入并影响变更检测周期的本机代码时，您应该考虑使用 NgZone.run() 将执行带入 Angular 的区域。

我的 Angular 谷歌地图库是开源的，你可以看看。我在其中实现了一些非常有趣的架构机制。 欢迎任何遇到此帖子并需要更多详细信息或帮助的人与我联系。

干杯?