最受欢迎的10大Angular技巧

2020 年 9 月 16 日

最受欢迎的10大Angular技巧

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

今年 6 月,我和 Waterplea 接受了一个有趣的挑战:每天在 Twitter 上写一个 Angular 技巧。Angular 社区对此表示热烈欢迎。

我决定写一篇社区最喜爱的 10 个技巧的总结,并详细解释它们的概念。

让全局对象令牌化

最受欢迎的推文是关于全局对象的 DI 令牌。

在前端,我们习惯使用很多在任何作用域内都可用的全局对象。我们使用诸如 window、document、fetch 方法和 location 等对象。我们希望能一直见到它们。

但比如说,在 Angular Universal 或 Jest 测试环境中没有浏览器,没有 Window,也没有 DOM,那该怎么办呢。通过将全局对象作为令牌(token),你可以放心地使用、替换和测试代码。

如果你想了解更多有关令牌的信息,并加深对 Angular 依赖注入机制的了解,请查看我在 angular.institute 上关于 DI 的免费章节

扩展 Observable 或 Subject

我看到许多开发人员在他们的应用中创建了出色的服务。因为我们使用 RxJS,所以服务可以在其中包含一个 Observable 或 Subject 并对其进行一些数据转换。

你可以简化这类情况,从 Observable 或 Subject 扩展服务:

控件值为 ReplaySubject

在某些情况下,你需要订阅控件 valueChanges 并获取其当前值。不要重新发明轮子,只需这样做即可:

高 DPI 用户

你知道如何分辨使用高 DPI 屏幕的用户吗?

你可以这样做检查,并用原生媒体标签使你的应用更适合高 DPI 屏幕:

不要忘记管道!

管道 Angular 是非常强大的选项。它使我们能够遵循组件模板内部的声明性方法。令我有些难过的是,一些 Angular 开发人员不喜欢创建自己的管道,可其实你几乎可以在任何数据转换的场景中创建管道。

这是适用于许多情况的通用管道示例:

Banana in a box

它有很多名字:banana in a box、双向绑定、输入 - 输出,并且使用起来很方便,比如和 ngModel 配合就很好用。但是如何为你自己的组件实现它呢?

RxJS 是一个未开发的世界

使用 RxJS 时,我尝试检查 RxJS 运算符的所有参数和重载,原因是有许多隐藏的选项可以使你更快地编写更强大的流。

还有许多运算符不是很流行,但是可以用一行代码来解决你的特定问题。

我就发现了一个例子

还有一条关于 RxJS 的推文,是让你的组件更具可扩展性的小技巧。

另一个:可以帮助编写具有很好功能的微型.pipe 的运算符。

你甚至可以制作自己的 ngFor 替代品

最后一个:Angular 对于 for…of… 之类的指令有特殊的语法。这样,你可以创建自己的 ngFor。

例如,它可以是用于迭代映射的 ngFor。或一个简单的从一个数字迭代到另一个数字的 for:

英文原文

The 10 best Angular tips selected by the community

2020 年 9 月 16 日 14:41 886
用户头像
小智 InfoQ高级编辑

发布了 181 篇内容,共 2935259 次阅读,收获喜欢 1565 次。

关注

评论

发布
暂无评论
发现更多内容

女博士年薪156万入职华为!网友:实力演绎美貌与智慧并存

程序员生活志

华为 少年天才

NIO的组成有哪些——奈学

奈学教育

nio

《深度工作》学习笔记(5)

石云升

读书笔记 专注 深度工作

week9 学习总结

耕夫

浙江上线市场监管区块链电子取证平台,武汉出台“区块链八条”,

CECBC区块链专委会

区块链 产业落地 金融行业

未来云原生世界的“领头羊”:容器批量计算项目Volcano 1.0版本发布

华为云开发者社区

Kubernetes 容器 华为云 Volcano 元原生

NIO的组成有哪些——奈学

古月木易

nio

Week09作业

熊威

【架构师训练营】第九期作业

云064

获得高手的精英思维,从写作开始。

叶小鍵

高手 万维钢 得到精英日课

「查缺补漏」巩固你的Redis知识体系

Kerwin

Java redis

架构师训练营-week09 作业

GunShotPanda

Week 09 学习总结

Jeremy

华为云的研究成果又双叒叕被MICCAI收录了!

华为云开发者社区

机器学习 AI 计算机视觉 医疗 华为云

架构师训练营 -week09 学习总结

GunShotPanda

架构师训练营第九周

橙子

EasyDL的数据集、模型与代码的版本管理:灵活管理效率提升

百度大脑

人工智能 模型训练 百度大脑

学习总结(训练营第九课)

看山是山

《RabbitMQ》如何保证消息不被重复消费

Java旅途

RabbitMQ 消息队列

一文教会你嵌入式网络模块的联网操作

良知犹存

物联网 网络 嵌入式

换一种方式构建镜像

北漂码农有话说

如何保存我们的资产

不在调上

架构师0期第九周命题作业

何伟敏

中国四大银行正在大规模内测数字货币APP|可凭手机号完成转账

CECBC区块链专委会

数字货币 DCEP 中国人民银行

打造高转化率网站不得不遵循的3条规范

姜奋斗

网站架构 网站 网站搭建 高转化率 转化

百度大脑人脸离线识别SDK升级盘点,Linux ARM版本上线

百度大脑

人工智能 人脸识别 百度大脑 sdk

Week 09 命题作业

Jeremy

JVM系列之:从汇编角度分析NullCheck

程序那些事

Java JVM JIT

产品经理【三句半】,说清你的【酸甜苦辣】

HPioneer

产品经理 产品设计

充分释放数据价值:安全、可信6到飞起

华为云开发者社区

区块链 数据共享 华为云 可信安全计算 数据价值

日入斗金,稳赚不赔?小心泛滥网络的兼职刷单让你钱尽财空

360安全卫士

最受欢迎的10大Angular技巧-InfoQ