NgZone：runOutsideAngular和run结合使用，减少变化检测，提高性能

NgZone

一种用于在 Angular Zone 内部或外部执行任务的可注入服务。

Zone.js 提供了一种称为区域（Zone）的机制，用于封装和拦截浏览器中的异步活动。

最常见的用途是在启动包含一个或多个不需要 Angular 处理的 UI 更新或错误处理的异步任务的工作时优化性能。

runOutsideAngular()

通过 runOutsideAngular() 运行函数可让你离开 Angular 的 Zone 并执行不会触发 Angular 变更检测或受 Angular 错误处理控制的工作。

此函数中计划的任何将来的任务或微任务将在 Angular Zone 之外继续执行。

使用 run() 重新进入 Angular Zone 并执行更新应用程序模型的工作。

run()

通过 run 运行的函数可让你从在 Angular Zone 之外执行的任务（通常通过 runOutsideAngular 启动）重新进入 Angular Zone 。

此函数中计划的任何将来的任务或微任务将在 Angular Zone 内继续执行。

如果发生同步错误，它将被重新抛出，并且不会通过 onError 报告。

应用：减少变化检测次数，提高性能

Angular变化检测只会由运行于 NgZone 中的异步操作触发。会触发变化检测的行为有：
(1) 任何浏览器事件，比如click、keydown等。
(2) setInterval() 、setTimeout
(3) http请求

示例：
由于每次的keydown都会触发Angular的变化检测，而我们该示例中只需要按下Enter键时执行变化检测。

为了避免没有必要的变化检测，提高性能，我们将keydow事件包裹在runOutsideAngular中，让keydown事件执行在Zone之外；当按下的是Enter键时，再通过run方法重新回到Zone中即可。

@Directive({
   
    selector: '[enter]'
})
export class MyEnterDirective implements OnInit {
   
    @Output() enter = new EventEmitter();

    constructor(private ngZone: NgZone, private elementRef: ElementRef<HTMLElement>) {
   }

    ngOnInit(): void {
   
        this.ngZone.runOutsideAngul