在这篇文章中，我想分享我为@Angular/Components做出贡献并与 Google 团队合作维护它的经验和教训。作为Infragistics的一名工程师，我在IgniteUI for Angular组件库工作，负责开发和维护IgxOverlayService 。它允许渲染 Angular 组件或覆盖应用程序中其他内容的ElementRef 。想想对话框、下拉菜单、工具提示等。

几个月前，我研究了Angular Components CDK （组件开发工具包）——一组实现常见交互模式的工具，同时对其演示不持任何意见。它代表了 Angular Material 库中核心功能的抽象，没有任何特定于 Material Design 的样式。将 CDK 视为经过充分测试的功能的空白状态，您可以在其上开发自己的定制组件。它提供的抽象之一是覆盖服务。这项服务的功能与我在我们的产品中负责的服务非常相似。 Angular Components Overlay 服务还允许渲染 Angular 组件或模板来覆盖应用程序中的其他内容。这项服务看起来很合适。我决定使用 CDK 提供的服务，而不是实现我们自己的服务。我开始调查 CDK 覆盖层的功能是否满足我们的要求。

入门

我与 Infragistics 的管理层举行了一次会议，讨论从IgxOverlayService切换到 Angular Components SDK Overlay 的可能性。我们决定，如果我们切换到 Angular 覆盖服务，我们需要维护的代码就会减少，并且我们将能够为 Angular Components 开源项目做出贡献。最后决定尝试改用SDK Overlay。为了实现这一转变，Infragistics 的开发人员可以每天花几个小时为 Angular Components 做出贡献。

第一步，我分叉了存储库，构建了包，运行了开发应用程序，并开始查看贡献流程和 Angular 组件团队遵循的标准。一旦我对代码感到更舒服，我就开始查看GitHub 上的 Material Components 公共存储库中的问题。如果您想做出贡献，这是一个很好的第一步，可以帮助您编写文档。以下是您的入门策略：

• Look at the issues. 看看问题吧。
• Grab one. 抓住一个。
• Try to solve it. 尝试解决它。

您解决的问题越多，您就越熟悉代码以及组件的开发和工作方式。在做出贡献之前，请务必查看“为 Angular Material 做出贡献”指南。它们将帮助您避免开始使用开源时的常见陷阱。

新功能

在我解决了几个问题并开始对这个库感到满意后，我查看了Overlay 服务，发现那里缺少我需要的一些特定功能。例如，能够呈现纯 HTML 元素，以及允许服务将其最终元素层次结构附加到 DOM 中的特定位置。在这里，我决定向 Angular 组件团队建议其他功能，并尝试自己实现它们。

事实格言。我们与我的团队领导和产品负责人一起与 Angular 组件团队建立了联系。经过几封电子邮件后，我们与他们举行了一次会议，讨论我们在覆盖服务中需要的新功能。他们对我们愿意为该产品做出贡献感到高兴。他们还解释了向项目添加新功能的过程。最重要的是：不要破坏现有的功能。正如他们所说，这个库被用于数千个应用程序，并且所有这些应用程序都应该在合并更改后工作。

设计文件

添加新功能的第一步是创建设计文档。您可以在GitHub 上的 Angular 组件团队的 wiki 页面上找到其所有设计文档的集合。在编写设计文档之前，最好检查现有的设计文档并使用推荐的模板开始。在检查了覆盖设计文档以及其他一些现有文档之后，我为 Angular Components Overlay 中所需的每个功能编写了一个文档。这个过程对我来说很艰难，要求也很高，但最终还是有收获的。向框架添加新功能可能看起来很容易，但是当您开始编写设计文档时，您会发现它有多么困难。您必须从各个角度了解该功能将如何工作以及它将如何与现有功能集成。将所有这些内容写在文档中有助于我阐明我对所需功能的看法。例如，以下是我必须回答的一些问题：

• 是否有其他实现可以与之比较？
• 该功能如何实现？
• API 会是什么？

当我完成设计文档后，它们必须经过 Angular 团队的审核。 Angular 团队非常快速且反应灵敏。当我发送设计文档后，我第二天就收到了审核（您的时间可能会有所不同）。我收到的所有评论都是简洁、积极且有建设性的。在解决了所有评论后，我获得了实施这些功能的许可。

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

执行

我实际开发的第二个功能是通过外部点击关闭叠加层的功能。想象一个模式对话框，可以在对话框外部单击，这应该将其关闭。您可以在此处找到解释实现细节和前期工作的设计文档。设计文档获得批准后，我开始编码。这与修复错误没有太大区别。我实现了该功能并添加了必要的测试。我在所有支持的环境中进行了测试。推送我的更改并创建 PR。然后 Angular Components 团队的成员检查了我的 PR 并要求进行一些更改。完成所有请求的更改后，该功能已添加到框架中。我的合并 PR 可以在这里找到。

新功能帮助 Angular Components 团队解决了项目中记录的一些问题。例如，MatMenu 正在使用 SDK 的覆盖层。当用户打开菜单时，它会显示为背景，这会使菜单成为模态菜单（问题6927 ）。因此，当菜单打开时，用户无法与应用程序项交互。使用新的detachOnOutsideClick功能有助于解决此问题。还有其他几个问题可以借助这个新功能来解决，例如9320 ； 15899和16036 。

这个故事分享了我作为 Angular 组件贡献者的经验。一开始这很令人生畏。我不确定从哪里开始以及一切如何协同工作。然而，如果你一步一步开始：找到你需要的组件，调试找出执行流程，并遵循贡献过程，那么一切都会自然而然地发生。最后我对自己的工作非常满意。我学到了很多东西：Angular 开发人员使用 RxJS 的方式、框架中的测试如何组织等等。当然，为数以万计的工程师使用的项目做出贡献的感觉非常棒。还发现负责该项目的人员乐于接受新想法并且非常友好。如果您有空闲时间，请继续检查 Angular Components 中的问题并修复一个！

文章来源地址：https://blog.angular.dev/how-i-contributed-to-angular-components-b3a8830ca268