本文最初发布于Medium网站，经原作者授权由InfoQ中文站翻译并分享。

在这篇文章中，我想分享我对@angular/components的贡献，以及与谷歌团队合作维护它的经验教训。作为Infragistics的工程师，我手头的一项工作是IgniteUI for Angular组件库，负责开发和维护IgxOverlayService。它允许在应用中的内容上层渲染一个Angular组件或一个ElementRef，比如说对话框、下拉菜单、工具提示等。

几个月前，我研究了Angular Components CDK（组件开发工具包），这组工具在实现通用交互模式的同时对其表示也不是opinionated的。它代表了在Angular Material库中核心功能的一个抽象，而没有任何专属Material Design的样式。可以把CDK视为经过良好测试的功能的一个空白状态，在此状态下你可以开发自己的定制组件。它提供的抽象之一是overlay（叠加）服务。这项服务的功能与我在产品中负责的功能非常相似。Angular Components Overlay服务还允许渲染Angular组件或模板以覆盖应用中的其他内容。这项服务看起来很合适。我决定不使用自己的服务，而使用CDK提供的这些服务。我开始调查CDK overlay是否符合我们的要求。

前期工作

我与Infragistics的管理层开了一个会，讨论了从IgxOverlayService切换到Angular Components SDK Overlay的可能性。我们的共识是，如果切换到Angular叠加服务，我们需要维护的代码会更少，并且我们将能为Angular Components开源项目做出贡献。最后，我们决定尝试切换到SDK Overlay。为了实现这一转换，Infragistics的开发人员得到许可，可以每天花几个小时为Angular Components做出贡献。

第一步，我分叉了存储库，构建了程序包，运行了dev-app，并开始研究贡献流程和Angular Components团队遵循的标准。当我熟悉了代码后，便开始查看GitHub上的Material Components公共存储库中的问题。如果你想做出贡献，那么从文档入手是很好的选项。下面是你可行的一种入门策略：

查看问题。
选一个。
尝试解决它。

你遇到的问题越多，你对代码以及组件的开发和工作方式就越熟悉。在贡献之前，请务必先阅读“对Angular Material做出贡献”指南。它将帮助你避免在开始使用开源项目时遇到的常见陷阱。

新功能

看过几个问题并开始熟悉这个库后，我看了一下Overlay服务，发现那里缺少我需要的某些特定功能。例如，它缺乏渲染纯HTML元素的能力，以及允许服务将其最终元素层次结构附加到DOM中特定位置的能力。于是我决定向Angular Components团队推荐新的功能，并尝试自己实现这些功能。

我和我的团队负责人与产品负责人一起，与Angular Components团队建立了联系。在几封电子邮件的交流之后，我们与对方开会讨论了叠加服务中所需的新功能。他们对我们为产品做出贡献的意愿感到高兴。他们还解释了向项目添加新功能的流程。最重要的一点是：不要破坏现有功能。正如他们所说，这个库已经用在了在成千上万的应用里，所以新的更改合并后应该不影响任何应用的工作。

设计文档

添加新功能的第一步是创建设计文档。你可以在GitHub的Wiki页面上找到Angular Components团队的所有设计文档的集合。在编写设计文档之前，最好检查一下现有文档并使用推荐的模板来起步。在检查了Overlay设计文档以及更多现有文档之后，我为Angular Components Overlay中自己需要的每一项功能都编写了文档。这个过程很艰苦，对我来说很困难，但到最后是很有意义的。向框架添加新功能可能看起来很容易，但当你开始编写设计文档时，你会发现这是有多难的事情。你必须从各个角度审视新功能的工作机制，以及它与现有功能集成的方式。将所有这些内容写到文档中后，我就可以描绘出自己对所需功能的蓝图。例如，以下是我必须回答的一些问题：

是否有另一个可以对比的实现？
该功能如何实现？
API会是什么？

等我完成了设计文档，它们就必须经过Angular团队的审查。Angular团队的反应速度非常快。设计文档发过去后，第二天就得到了审核（你的时间表可能会有所不同）。我收到的所有评论都是简洁、积极和建设性的。在解决所有评论之后，我获得了实现功能的绿灯。

我关注的第一个功能是叠加层渲染DOM元素或ElementRef的能力。幸运的是，当我完成设计文档并被Angular Components团队接受后，他们告诉我该功能已经实现，并已包含在一个PR中。我查看了这个PR，并请求了一些更改，因为我需要的某些更改已包含在该PR中。

实现

我实际开发的是自己需要的第二个功能，是在外部单击时关闭叠加层。想象一个模态对话框，你可以在对话框外部单击，然后它就会关闭。你可以在此处找到解释实现细节和先前工作的设计文档。设计文档获得批准后，我就开始写代码了。这个过程与修复错误没有太大的不同。我实现了该功能并添加了必要的测试。我在所有受支持的环境中进行了测试，然后推送了我的更改并创建PR。接下来，Angular Components团队的成员检查了我的PR，并要求了一些更改。完成所有请求的更改后，该功能被添加到框架中。我的合并PR在这里。

新功能帮助Angular Components团队解决了项目中记录的一些问题。例如，MatMenu就使用了SDK的叠加层。当用户打开一个菜单时，显示的菜单会带backdrop，使菜单变为模态的（issue6927）。结果，当菜单打开时，用户将无法与应用程序项目交互。使用新的detachOnOutsideClick功能可以解决此问题。借助这一新功能还可以解决其他一些问题，例如9320、15899和16036。

这个故事分享了我作为Angular Component贡献者的经验。一开始我是没什么头绪的。我不确定从哪里开始，不知道该如何协作。但如果你一步一步地往前走：找到所需的组件，进行调试以找出执行流程，并按照贡献流程行事，那么一切自然就会解决了。最后，我对自己的工作感到非常满意。我学到了很多东西：Angular开发人员使用RxJS的方式、如何组织框架中的测试，等等。当然，为成千上万的工程师使用的项目做贡献的感觉也很棒。我还发现了负责项目的人们乐于接受新想法，并且非常友好。如果你有空闲时间，请大胆向前，检查Angular Components中的问题并挑一个解决吧！

原文链接：

How I contributed to Angular Components

创作场景

我是如何为 Angular Components 做出贡献的