十大社区角技巧

在六月,Sasha Inkin我Roma Sedov在Twitter上发起了挑战。



每天,我们都会发布有关Angular的建议,技巧或一些有用的文章。此运动受到开发人员社区的热烈欢迎和支持。



我决定写一篇有关十个最喜欢的技巧的文章,并详细解释其中的概念。



开始吧!







标记全局对象!



最受欢迎的推文谈到了全局对象的DI令牌。



在前端,我们习惯了以下事实:全局环境中有许多对象。我们使用诸如窗口,文档,获取方法,位置之类的对象,我们从不希望它们存在。



但是,例如,在Angular Universal或Jest的测试环境中,没有浏览器,没有窗口对象,也没有DOM。通过将这些实体通过令牌传递给应用程序,您将永远不会遇到使用它们,替换它们或测试代码的问题。





继承自Observable或Subject



我知道许多在其应用程序中创建良好服务的开发人员。这些服务做得很好。而且,由于我们在Angular生态系统中使用RxJS,因此此类服务只能包含一个字段,其中包含Observable或Subject来转换数据。



可以通过从Observable或Subject继承服务来简化这种情况:





控制值为ReplaySubject



在某些情况下,有必要预订反应式控件的valueChanges,以从其当前值开始流。现在,您不必重新发明轮子,只需向自己添加以下包装器:





使应用程序更好地适合高DPI显示



您知道吗,您可以使用“高DPI”屏幕轻松跟踪用户?

此外,您甚至可以使用本机媒体标签为此类监视器提供分辨率合适的媒体元素,而无需付出额外的努力:





不要忘记管道



管道是使用Angular框架样式的绝佳工具。它们使我们能够在组件模板中保持声明性。遗憾的是,一些Angular开发人员避免创建自己的管道:有了它们,您几乎可以在任何情况下巧妙地转换数据。



这是用于数据转换的通用管道的示例:





做你的香蕉盒



这个Angular功能有很多名称:“盒装香蕉”,“双向绑定”或只是“输入输出”。在使用[(ngModel)]时,通常会在表单中找到这种方法。但是您知道如何为自己的组件实现此功能吗?





RxJS-未知的世界



我总是尝试检查我使用的RxJS运算符的所有参数和重载。原因:它们中的许多都有隐藏的选项,您可以学习它们,从而更快,更轻松地编写一些流。



此外,还有不受欢迎的运营商。它们很少遇到,但是它们可以在一行代码中解决一些特定的问题,而不是庞大而棘手的流。

例如,对我来说,这些发现之一是distinctUntilChanged运算符中的比较函数:





关于RxJS的消息也很流行。一个使您的组件更容易扩展的小技巧:





或defaultIfEmpty运算符,该运算符使您可以在一行代码中将有用的逻辑放入流中:





您甚至可以编写自己的ngFor替代方案



最后一件事:Angular对于指令选择器(例如for ... of ...)具有特殊的语法,您可以使用它为任何任务创建自己的ngFor。



例如,您可以快速执行ngFor来迭代Map对象。或一个简单的迭代索引从一个数字到另一个:





结论



Angular很大,并且具有更多功能。我有许多新技巧的想法,以及与社区分享的最佳实践中的技巧。如果您对这样的新推文感兴趣,请在Twitter上关注我祝你有愉快的一天!



All Articles