限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

最受欢迎的 10 大 Angular 技巧

  • 2020-09-16
  • 本文字数:1077 字

    阅读完需:约 4 分钟

最受欢迎的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-09-16 14:411933
用户头像
小智 让所有人认同的文字称不上表达

发布了 408 篇内容, 共 400.4 次阅读, 收获喜欢 1985 次。

关注

评论

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

2023 IoTDB Summit:天谋科技高级开发工程师谭新宇《优其效:如何用 IoTDB 监控工具进行深度系统调优》

Apache IoTDB

软件测试/测试开发/全日制|Page Object模式:为什么它是Web自动化测试的必备工具

霍格沃兹测试开发学社

赋能虚拟教学革命,实时云渲染助力复旦大学打造元宇宙教学

3DCAT实时渲染

元宇宙 元宇宙解决方案 元宇宙教学

自动化测试用例规范

无涯

自动化测试 测试开发 pytest Python自动化测试

程序员一定要知道的前端常用设计模式

不在线第一只蜗牛

前端 前端开发

软件测试/测试开发/测试管理 | Page Object模式:为什么它是Web自动化测试的必备工具

测吧(北京)科技有限公司

测试

创新逛展体验!实时云渲染助力2023天河区首届房博会元宇宙

3DCAT实时渲染

元宇宙解决方案 元宇宙线上展厅

Picturesocial | 开发实践:如何在15分钟内将应用容器化

亚马逊云科技 (Amazon Web Services)

Docker ubuntu 容器 API

除了OneNote,还有什么值得推荐的手写笔记软件?

彭宏豪95

效率工具 在线白板 办公软件 笔记软件 boardmix

宇宙的尽头是带货,大模型首战在营销

脑极体

AI

如何利用docker部署springboot 项目

想要飞的猪

在 zsh 中找不到刚刚安装的 MySQL 怎么破?

escray

MySQL

OpenSPG 新版发布:新增大模型知识抽取,3 步快速搭建专属知识图谱

可信AI进展

知识图谱 大模型 LLM

第七在线荣获百灵奖 Buylink Awards 2023零售圈年度卓越服务商品牌

第七在线

官宣!OpenTiny 前端 Web 应用开发挑战赛开赛啦~30万奖金等你拿!

OpenTiny社区

开源 前端 低代码 组件库

Ronin Network 宣布与链上数据解决方案 Footprint Analytics 合作

Footprint Analytics

区块链 以太坊 加密货币

国内再下两城!Zilliz Cloud 全球可用服务区增至 11 个

Zilliz

Zilliz AIGC zillizcloud 云原生向量数据库

深入了解 Python MongoDB 操作:排序、删除、更新、结果限制全面解析

小万哥

Python 数据库 程序人生 软件工程 后端开发

左耳听风 - 程序员修炼之道「读书打卡 day 07」

Java 工程师蔡姬

读书笔记 程序员 个人成长 职业发展

全方位提升用户数字化体验的解决方案

观测云

用户体验

Excel数据转换为一对多的工具类

alexgaoyh

Java Excel 一对多解析 exsyexcel 数据解析

Zynq7020 使用 Video Processing Subsystem 实现图像缩放

芯动大师

稳定性建设实践分享

木小风

稳定性

聚合收益协议 InsFi :打开铭文赛道全新叙事的旋转门

股市老人

实现高效人力资源管理的完美搭档,聚道云与薪人薪事合作,助力企业数字化转型

聚道云软件连接器

案例分享

腾讯云ES AI增强搜索:十分钟快速入门自然语言处理(NLP)与向量检索

腾讯云大数据

ES

2024杭州国际智慧城市,人工智能,安防展览会(杭州智博会)

AIOTE智博会

智博会 物联网展 人工智能展 智慧城市展 杭州智博会

最受欢迎的10大Angular技巧_大前端_Roman Sedov_InfoQ精选文章