angular - Angular 区域

Question

什么是区域？

angular ngZone 与 zone.js 有何不同？

什么时候应该使用它们？有人可以帮助使用 ngZone 的实际示例吗？

但是，我在这里阅读了 angular 文档，但无法完全理解。

https://angular.io/api/core/NgZone

Answer 1

NgZone是一个围绕 Zone.js 的包装器，它是一个围绕异步函数创建上下文以使它们可跟踪的库。

Angular 的变化检测严重依赖于 Zones ， 如何？

Angular 需要一种理解什么时候运行变更检测的方法，这基本上就是更新 DOM代表最新的模型 (javascript) 更改。

想象一下我们有下面的例子:

  <div id="content"></div>

在我们的 javascript 代码中，我们有

const element = document.getElementById('content');

function updateText(){
     element.innerHtml = myText+ ": updated at time"+Date.now()
}

假设最初我要更新 content打个招呼:

  const myText = "Hello";

  this.updateText();

这会将我的 HTML 内容更新为文本:“Hello updated at time 19:30”

然后假设我想更新 myText用户单击后，变量变为其他内容:

  <button onClick="updateTheTextAgain()"></button>



  updateTheTextAgain(){

     this.myText = "Hi there";
  }

如果我点击那个按钮会发生什么？

没什么 ;

嗯，实际上，它不是，“没有”，我设法更新了变量，但是我没有更新 View (我没有检测到模型的变化)，所以我需要调整我的 updateTheTextAgain成为 :

   updateTheTextAgain(){

     this.myText = "Hi there";
       this.updateText(); /// Making sure I'm detecting the change ( I'm updating the `DOM`)

  }

现在，单击该按钮将更新我的 View (因为手动更改检测)。

这显然不是最好的主意，因为那样我要写很多 updateText函数并在我希望更新模型后更新 View 的任何地方调用它们，对吗(返回 Angular1 并记住 $scope.apply())？

这里是 ZoneJs是惊人的。

想象一下，如果我可以重写 onClick函数，我的意思是浏览器的原始 onClick 函数是:

 const originalOnClick = window.onClick;


 window.onClick = function(){
    originalOnClick();
    this. updateText();
 }

这叫做 monkey patching或 open heart surgery native 功能。

我得到了什么？

在我把我的 patched onClick在页面中，所有 onClick将在整个应用程序中编写的函数，将通过我的 patched onClick ，这意味着，我不必运行 updateText()每次点击后都不再起作用，因为它被烘焙到 click事件处理程序本身。

在 Angular 中，那个 updateText是 change detection , Angular 在所有原生事件中都有钩子(Hook)(通过使用 Zones)。

所以当你写:

   setTimeout(()=>{
        console.log('Do something');

   },100);

你实际写的东西是这样的:

   setTimeout(()=>{
        console.log('Do something');
        runAngularsChangeDetection(); 
   },100);

以上与现实中发生的事情相去甚远，但它是变化检测和 Zones 整个故事的核心。为什么我们需要它们/

** 更新:**

我们什么时候应该使用 NgZone .

想使用 NgZone 的情况很多，我可以说出两个:

1- 当您想要在 Angular 的更改检测之外运行某些内容时:

还记得我说过 Angular 在所有异步事件中都有钩子(Hook)吗？ window.onScroll是其中之一，现在假设我们想在用户滚动时做一些计算，你通常做的是:

   window.onscroll = ()=>{

    // do some heavy calculation : 
  }     

现在，当滚动时，您的函数会像您预期的那样正常调用，但您可能会注意到您遇到了一些性能问题，这可能是因为 Angular 正在运行 changeDetection在每个滚动事件(预期行为)上。

如果您的组件中有很多绑定(bind)，那么您肯定会注意到滚动中的性能下降。

所以一种方法是说，嘿 Angular，忽略我的 onscroll事件，我知道我在做什么，我不希望您运行更改检测，在这种情况下，您可以使用 NgZone

 constructor(private zone:NgZone){
   this.zone.runOutsideOfAngular(()=>{
      window.onscroll = ()=>{
       // do some heavy calculation : 
      }
    })
  }

这将确保 Angular 不会在滚动时运行更改检测。

另一种情况与上述情况正好相反，您有一个函数在 Angular 的区域之外，而您希望它在里面，就像第三方库正在为您做一些事情而您希望它绑定(bind)到你的 Angular 循环。

   this.zone.run(()=>{
        $.get('someUrl').then(()=>{
           this.myViewVariable = "updated";
        })
   });

在不使用 Zone 的情况下，您很可能需要执行以下操作:

         $.get('someUrl').then(()=>{
           this.myViewVariable = "updated";
           this.changeDetectorRef.detectChanges();
        })

但请注意，当您的函数在区域内(运行方法)时，您不必调用 detectChanges自己手动和 angular 将完成这项工作