社区选择的10个最佳Angular技巧

angular技巧

Waterplea and I took an interesting challenge this June: we wrote an Angular tip every day on Twitter. It was warmly welcomed by the Angular community.

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

I decided to write an article about 10 tips and tricks that have the most likes and explain their concepts in more detail.

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

Let’s start!

开始吧！

标记全局对象 (Tokenize global objects)

The most popular tweet was about DI tokens of global objects.

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

In frontend, we are used to many global objects available in any scope. We use objects like window, document, fetch method, location, etc. We don't expect that there can be situations when we do not have them.

在前端，我们习惯了任何作用域中可用的许多全局对象。 我们使用诸如window ， document ， fetch方法， location等对象。我们不希望在没有对象的情况下会出现这种情况。

But for example, there is no browser, no Window and no DOM in Angular Universal or Jest testing environment. And having global objects as tokens, you can use, replace and test code without problems.

但是例如，在Angular Universal或Jest测试环境中没有浏览器，没有Window，也没有DOM。 并将全局对象作为令牌，您可以毫无问题地使用，替换和测试代码。

If you want to know more about tokens and deepen your knowledge about Angular Dependency Injection mechanism, check my free chapter about DI on angular.institute

如果您想了解更多有关令牌的信息并加深对Angular Dependency Injection机制的了解，请查看我关于angular.institute的关于DI的免费章节

扩展可观察或主题 (Extend Observable or Subject)

I saw many developers who created good services in their apps that make one thing well. Because we use RxJS, service can contain one Observable or Subject inside and do some data transformation for it.

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

So, you can simplify such situations extending your services from Observable or Subject:

因此，您可以简化这种情况，从Observable或Subject扩展您的服务:

控制值为ReplaySubject (Control value as ReplaySubject)

There can be situations when you need to subscribe to control valueChanges and get its current value as well. So, do not reinvent the wheel, just you the following wrapper:

在valueChanges情况下，您需要订阅控件valueChanges并获取其当前值。 因此，不要重新发明轮子，只需重新包装以下包装材料即可:

欢迎高级DPI用户 (Welcome High DPI users)

Do you know that you can monitor your users with High DPI screens?

您知道您可以使用“高DPI”屏幕监视用户吗？

You can check it and make your app better for High DPI screens with the native media tags:

您可以检查它，并使用本机媒体标签使您的应用更好地适应高DPI屏幕:

不要忘记管道！ (Do not forget about pipes!)

Pipes is a very powerful option to work in Angular way. It allows us to follow the declarative approach inside component templates. It saddens me that some Angular devs avoid creating their own pipes because you can make pipes almost for any case of data transformation.

管道是以Angular方式工作的非常强大的选择。 它使我们能够遵循组件模板内部的声明性方法。 令我有些难过的是，一些Angular开发人员避免创建自己的管道，因为您几乎可以在任何数据转换情况下创建管道。

And here is an example of a common pipe for many cases:

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

把香蕉装进盒子里 (Get your box with banana)

It has so many names: banana in a box, two-way binding, input-output. And it is convenient to use it, for example, working with ngModel. But how to implement it for your own component?

它有很多名字:盒子里的香蕉，双向绑定，输入输出。 并且使用起来很方便，例如，使用ngModel. 但是如何为您自己的组件实现它？

RxJS是一个未开发的世界 (RxJS is an unexplored world)

I try to check all parameters and overloads of RxJS operators when I use them. The reason is: there are many hidden options knowing which you can write your streams faster and more powerful.

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

There are also many operators that are not very popular but can solve your particular problem in one line of code instead of a big stream.

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

One of such discoveries for me was the following one:

对我来说，这样的发现之一是:

There is also a popular tweet about RxJS. It is a small trick to make your components a bit more scalable :)

还有关于RxJS的流行推文。 这是使您的组件更具可扩展性的小技巧:)

Or the other one: an operator that can help write tiny .pipe with quite serious functionality.

或另一个:可以帮助编写具有相当严格功能的微型.pipe的运算符。

您甚至可以制作自己的ngFor替代品 (You can even make your own ngFor alternative)

And the last one: Angular has a special syntax for for … of … like directives. This way you can create your own ngFor for your case.

最后一个:Angular for … of …类的指令具有特殊的语法。 这样，您可以为自己的案例创建自己的ngFor 。

It can be, for example, a ngFor for iterating a map. Or a simple for for iterating from a number to a number:

例如，它可以是用于迭代地图的ngFor 。 或一个简单for从数字迭代到数字的方法:

结论 (Conclusion)

Angular is big and there is a lot more to tell. I have many ideas for new tips and tricks to share my best practices with the community. So, if you are interested in such new tweets, follow me on Twitter and have a nice day!

角度很大，还有很多要说的。 我对新技巧有很多想法，可以与社区分享我的最佳实践。 因此，如果您对这样的新推文感兴趣，请在Twitter上关注我，祝您愉快！

翻译自: https://medium.com/its-tinkoff/best-angular-tips-90bdc1c25529

angular技巧