【问题标题】:How to create an Angular wrapper around an existing Javascript library?如何围绕现有的 Javascript 库创建 Angular 包装器?
【发布时间】:2019-01-21 19:32:43
【问题描述】:

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

非常感谢任何帮助! :)

【问题讨论】:

    标签: javascript angular ng-packagr


    【解决方案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

    对于事件委托,您可以创建一种机制,为您的原生事件生成可观察对象(或 EventEmitters)。

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

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

    干杯?

    【讨论】:

      猜你喜欢
      • 2018-12-23
      • 2018-01-19
      • 1970-01-01
      • 2020-02-22
      • 2011-09-30
      • 2018-04-12
      • 2021-03-26
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多