最受欢迎的10大Angular技巧
本文最初发布于 indepth.dev 网站，经原作者授权由 InfoQ 中文站翻译并分享。
今年 6 月，我和 Waterplea 接受了一个有趣的挑战：每天在 Twitter 上写一个 Angular 技巧。Angular 社区对此表示热烈欢迎。
我决定写一篇社区最喜爱的 10 个技巧的总结，并详细解释它们的概念。
最受欢迎的推文是关于全局对象的 DI 令牌。
在前端，我们习惯使用很多在任何作用域内都可用的全局对象。我们使用诸如 window、document、fetch 方法和 location 等对象。我们希望能一直见到它们。
但比如说，在 Angular Universal 或 Jest 测试环境中没有浏览器，没有 Window，也没有 DOM，那该怎么办呢。通过将全局对象作为令牌（token），你可以放心地使用、替换和测试代码。
https://twitter.com/marsibarsi/status/1274662852079517697?s=20
如果你想了解更多有关令牌的信息，并加深对 Angular 依赖注入机制的了解，请查看我在 angular.institute 上关于 DI 的免费章节：
https://angular.institute/
扩展 Observable 或 Subject
我看到许多开发人员在他们的应用中创建了出色的服务。因为我们使用 RxJS，所以服务可以在其中包含一个 Observable 或 Subject 并对其进行一些数据转换。
你可以简化这类情况，从 Observable 或 Subject 扩展服务：
https://twitter.com/marsibarsi/status/1274244090285170689?s=20
在某些情况下，你需要订阅控件 valueChanges 并获取其当前值。不要重新发明轮子，只需这样做即可：
https://twitter.com/marsibarsi/status/1269201441756979200?s=20
你知道如何分辨使用高 DPI 屏幕的用户吗？
你可以这样做检查，并用原生媒体标签使你的应用更适合高 DPI 屏幕：
https://twitter.com/marsibarsi/status/1273193230901956608?s=20
管道 Angular 是非常强大的选项。它使我们能够遵循组件模板内部的声明性方法。令我有些难过的是，一些 Angular 开发人员不喜欢创建自己的管道，可其实你几乎可以在任何数据转换的场景中创建管道。
这是适用于许多情况的通用管道示例：
https://twitter.com/marsibarsi/status/1270650741275987970?s=20
它有很多名字：banana in a box、双向绑定、输入 - 输出，并且使用起来很方便，比如和 ngModel 配合就很好用。但是如何为你自己的组件实现它呢？
https://twitter.com/marsibarsi/status/1283676458775392256?s=20
使用 RxJS 时，我尝试检查 RxJS 运算符的所有参数和重载，原因是有许多隐藏的选项可以使你更快地编写更强大的流。
还有许多运算符不是很流行，但是可以用一行代码来解决你的特定问题。
我就发现了一个例子：
https://twitter.com/marsibarsi/status/1276804788982693888?s=20
还有一条关于 RxJS 的推文，是让你的组件更具可扩展性的小技巧。
https://twitter.com/marsibarsi/status/1277915827526868993?s=20
另一个：可以帮助编写具有很好功能的微型.pipe 的运算符。
https://twitter.com/marsibarsi/status/1277568971202584576?s=20
最后一个：Angular 对于 for...of... 之类的指令有特殊的语法。这样，你可以创建自己的 ngFor。
例如，它可以是用于迭代映射的 ngFor。或一个简单的从一个数字迭代到另一个数字的 for：
https://twitter.com/marsibarsi/status/1270282771458555906?s=20
Angular 是一个很大的主题，能说的东西还有很多。我有很多关于新技巧的想法，准备与社区分享我的最佳实践。因此，如果你对这样的推文感兴趣，请在 Twitter 上关注我（https://twitter.com/marsibarsi），编程愉快！
参考阅读：
https://indepth.dev/best-angular-tips/
点个在看少个 bug 👇