angular创建component(我是如何为 Angular Components 做出贡献的)

本文原载于Medium网站，经原作者授权，由InfoQ中文网翻译分享。在这篇文章中，我想分享我对@angular/components的贡献，以及我和Google团队一起维护它的经验和教训。作为一名Infragistics的工程师，我的工作之一是Angular component library的IgniteUI，负责开发和维护IgxOverlayService。它允许一个角度组件或一个ElementRef呈现在应用程序的内容之上，如对话框、下拉菜单、工具提示等。几个月前，我研究了Angular Components CDK(组件开发工具包)。这套工具不仅实现了通用的交互模式，还代表了它不固执己见。它代表了Angular素材库中核心功能的抽象，没有任何专属的材质设计风格。可以把CDK想象成一个测试良好的功能的空白状态，在其中你可以开发你自己的定制组件。它提供的抽象之一是覆盖服务。这个服务的功能和我在产品中负责的功能很像。角度组件覆盖服务还允许您渲染角度组件或模板，以覆盖应用程序中的其他内容。这项服务似乎很合适。我决定使用CDK提供的这些服务，而不是我自己的服务。我开始调查CDK临建是否符合我们的要求。
前期我和Infragistics的管理层开会讨论从IgxOverlayService切换到Angular Components SDK Overlay的可能性。我们的共识是，如果我们转向Angular overlay服务，我们将需要维护更少的代码，我们将能够为Angular Components开源项目做出贡献。最后，我们决定尝试切换到SDK覆盖。为了实现这种转变，Infragistics的开发人员被授权每天花几个小时开发角度组件。第一步，我分叉了存储库，构建了包，运行了dev-app，并开始研究Angular Components团队遵循的贡献过程和标准。当我熟悉了代码后，我开始查看GitHub上的Material Components公共存储库中的问题。如果你想投稿，从文档开始是个不错的选择。这里有一个可行的策略供你开始：
检查问题。选一个。想办法解决。遇到的问题越多，对代码和组件的开发和工作方法就越熟悉。投稿前，请务必阅读指南《投稿有角素材》。当您开始使用开源项目时，它将帮助您避免常见的陷阱。
新特性在阅读了几个问题并熟悉了这个库之后，我看了一下覆盖服务，发现那里缺少了一些我需要的特定特性。例如，它缺乏呈现纯HTML元素的能力，以及允许服务将它们的最终元素层次结构附加到DOM中特定位置的能力。所以我决定向Angular Components团队推荐新功能，并尝试自己实现。我与我的团队领导和产品领导一起，与Angular Components团队建立了联系。在交换了几封邮件后，我们见面讨论了叠加服务中需要的新功能。他们很高兴我们愿意为产品做出贡献。他们还解释了向项目添加新功能的过程。最重要的一点是：不要破坏现有的功能。正如他们所说，这个库已经在成千上万的应用程序中使用，所以合并后新的变化应该不会影响任何应用程序的工作。
向设计文档添加新功能的第一步是创建设计文档。你可以在GitHub的Wiki页面上找到Angular Components团队所有设计文档的集合。在写设计文档之前，最好检查现有文档，并使用推荐的模板开始。在检查了覆盖设计文档和更多的现有文档后，我已经为Angular Components覆盖中需要的每个功能编写了文档。这个过程对我来说很辛苦，也很艰难，但最终是有意义的。给框架添加新功能看似容易，但当你开始写设计文档时，你会发现它有多难。你必须从各个角度考察新功能的工作机制，以及它与现有功能整合的方式。将所有这些内容写入文档后，我就可以为所需的功能绘制自己的蓝图了。例如，这里有一些我必须回答的问题：
有没有另一种实现可以比较？这个功能是怎么实现的？API是什么？当我完成设计文档时，它们必须经过Angular团队的审核。Angular的团队反应非常迅速。设计发完之后，第二天就要审核了(你的时间安排可能不一样)。我收到的所有评论都是简洁、积极和有建设性的。解决了所有评论后，我拿到了实现功能的绿灯。我关心的第一个功能是叠加层呈现DOM元素或ElementRef的能力。幸运的是，当我完成设计文档并被Angular Components团队接受时，他们告诉我功能已经实现并包含在PR中。我检查了这个PR并要求一些更改，因为我需要的一些更改已经包含在这个PR中。
我实际开发的是我需要的第二个功能，就是在我外部点击的时候关闭叠加。想象一个模态对话框，你可以在对话框外面点击，然后它就会关闭。你可以在这里找到解释实现细节和以前工作的设计文档。设计通过后，我开始写代码。这个过程与修复错误没有太大区别。我实现了这个功能，并添加了必要的测试。我在所有支持的环境中进行了测试，然后推出了我的更改并创建了PR。接下来，Angular Components团队的成员检查了我的PR，并要求做一些修改。完成所有请求的更改后，该特性将被添加到框架中。我的并购公关来了。新功能帮助Angular Components团队解决了项目中记录的一些问题。比如MatMenu就使用了SDK的叠加层。当用户打开菜单时，显示的菜单将被积压，使菜单成为模式菜单(问题6927)。结果，当菜单打开时，用户将不能与应用程序项目交互。新的detachOnOutsideClick函数可以解决这个问题。有了这个新功能，其他一些问题也可以解决，比如9320，15899，16036。这个故事分享了我作为Angular Component投稿人的经历。一开始我一点头绪都没有。我不知道从哪里开始，如何合作。但是如果你一步一步往前走：找到需要的组件，调试找出执行流程，按照贡献流程来，那么一切自然就解决了。最后，我对自己的工作非常满意。我学到了很多：Angular开发者使用RxJS的方式，如何组织框架中的测试等等。当然，为成千上万的工程师使用的项目做贡献感觉很棒。我还发现，负责该项目的人乐于接受新想法，而且非常友好。如果你有空闲时间，请大胆前进，检查角组件中的问题并挑选解决方案！原文链接：我是如何对角度组件做出贡献的
关注我，转发这篇文章。如果你给我发私信“获取信息”，你可以从InfoQ免费获得价值4999元的迷你书。点击文末“了解更多”，可移步InfoQ官网获取最新资讯~