原文： Angular Change Detection Explained

原文地址：Angular - What is Unidirectional Data Flow? Learn How the Angular Development Mode Works, why it’s important to use it and how to Troubleshoot it

Web 框架的一个重要的特征就是 单向数据流。让我们来谈谈这个术语是什么意思，以及它在 Angular 中的对应关系。

与此相关，我们也来了解一下 Angular 的开发模式，为什么使用它很重要，如果需要的话，我们可以如何排除故障。让我们首先从单向数据流这个术语的数据部分开始。

How to RxJS in Angular

经过几年的 Angular 前端开发和 RxJS 的大量使用，我决定把我个人的一些关键经验写成一篇简洁的文章。在这篇文章中，我假设你已经对 Observable-streams 以及不同的 Subject-types 的工作方式有了一些基本的了解。如果是这样的话，这可能会帮助你掌握 Angular 中 RxJS 的最常见的使用情况。

我们在实现前端页面时，经常会遇到使用 http 加载远程数据的情况，为了友好的用户体验，一般在请求 http 远程数据时，都会用一个加载动画来减轻用户的等待焦虑。

返回上一页可能是 web 应用中最常用的一个功能，实现方式也有很多种。
一般在设计返回上一页功能时，都要记住上一页的状态。
比如从一个列表页点击到详情页时，列表页可能有一些状态，比如当前的搜索条件，或者是列表的分页等状态，再从详情页点击“返回上一页”时，除了要跳转到列表页，还要记住之前的搜索条件或分页等状态。

Angular 有两种变更检测策略：Default和OnPush。在一些中小型项目中，直接使用默认的Default策略即可，但如果在一些大型项目中，数据量比较大，而且变动比较频繁，一般会使用OnPush策略来优化性能。

OnPush策略提供了跳过对这个组件和它的所有子组件的不必要检查的可能性，以提高性能。
其中有一项很重要的就是输入的引用发生了变化。
JavaScript 中的所有东西都是通过引用传递的，但所有的基元(基础类型数据)都是不可改变的，它们的字面表述都指向同一个基元实例/引用。修改对象属性或数组条目不会创建一个新的引用，因此不会触发 OnPush 组件的变更检测。要触发变更检测器，你需要传递一个新的对象或数组引用来代替。
这就要求输入使用不可变对象，每次对象属性发生变化都产生一个新对象引用，以便能够触发变更检测。

翻译自《The Last Guide For Angular Change Detection You’ll Ever Need》

Angular 的 Change Detection 是该框架的一个核心机制，但（至少从我的经验来看）它非常难以理解。不幸的是，在官方网站上没有关于这个主题的官方指南。

在这篇博文中，我将为你提供所有你需要了解的关于变更检测的必要信息。我将通过使用我为这篇博文建立的一个演示项目来解释其机制。

目录

• 混合内容访问
• 打开浏览器对于混合内容的限制
• 服务器端使用nginx进行转发

两种方式：

• document.execCommand()
• Clipboard API

Angular 的 HttpClient 实现了拦截器机制，可以对请求进行拦截与修改，过滤等操作。
基于这种特性，我们可以很方便的将有关 http 请求的一些逻辑抽离出来，对代码进行解藕。