zoukankan      html  css  js  c++  java
  • Angular 2 Expression Changed After It Has Been Checked Exception

    该错误仅在开发模式下会报告出来的,解决掉总是好的,防止在生产环境下出现问题。

    问题的原因及解决办法

    这个问题是ng2中的变更检测策略造成的,ng2并没有智能到一有数据变更就能自动检测到的,执行变更检测的一些情况有:组件中的输入发生变化、组件中有事件响应、setTimeOut函数等。
    解决办法也很简单,ng支持手动触发变更检测,只要在适当的位置,调用变更检测即可。
    在上面的例子中,解决办法为:
    从@angular/core引入AfterViewInit, ChangeDetectorRef。注入ChangeDetectorRef对象,并在声明周期钩子ngAfterViewInit中调用变更

    constructor(private cdr: ChangeDetectorRef){}
    
    ngAfterViewInit(){
      this.cdr.detectChanges();
    }
    

    ChangeDetectorRef(相关链接:http://blog.csdn.net/railsbug/article/details/77239509

    用来处理ng变更的类,可以使用它来进行完全的手动变更检测,主要有一下方法:
    1.markForCheck()标记为需要进行变更检测,官方给的例子,setInterval不会触发变更检测,因此模板上的numberOfTicks 并不会发生变化。

    setInterval(() => {
    this.numberOfTicks ++
     // the following is required, otherwise the view will not be updated
     this.ref.markForCheck();
    }, 1000);
    

    2.detach()从变更检测树上分离,即该组件不会进行自动的变更检测,变更需要手动进行,使用detectChanges函数。
    3.detectChanges()手动检测变更,当变更检测代价较大时,可以设置为定时进行变更检测

    ref.detach();
    setInterval(() => {
     this.ref.detectChanges();
    }, 5000);
    

    4.checkNoChanges()进行变更检测,有变更时抛出异常
    5.reattach()与detach()方法的作用相反

    其他一些变更检测知识

    angular2中的每一个组件都关联到一个变更检测器,ChangeDetectorRef可以用来控制变更检测器进行检测。
    浏览器的以下行为可以出发检测器进行检测:
    1.所有浏览器事件
    2.setTimeout()和setInterval()
    3.Ajax请求

    OnPush变更检测模式(ng2变更检测知识:https://segmentfault.com/a/1190000008754052

    组件默认使用的是Default变更检测模式,只要组件的输入发生变化时,就会触发检测器的执行。除Default模式外,还有一种OnPush变更检测模式,使用该模式首先需要在组件声明修饰符中添加

    @Component({
        selector: 'todo-list',
        changeDetection: ChangeDetectionStrategy.OnPush,
    })
    

    声明为OnPush变更检测模式意味着当组件输入发生变化时,不一定会触发变更检测器,只有当该输入的引用发生变化时,检测器才会触发。例如在一个数组中某个下标的值发生变化时,检测器不会触发,视图不会更新,只有该数组引用发生变化时,视图才会更新。当然浏览器事件、observable发出的事件等还是会触发检测器的。

     

    其它解决方法:http://www.allenhashkey.com/web-development/angular2/angular-2-expression-changed-after-it-has-been-checked-exception/  


          

  • 相关阅读:
    SCM Introduction
    upper lower capitalize and title
    isinstance
    splitlines
    使用 UITableView 创建表格应用演练(4)——自定义单元格
    高性能网站的十四条黄金法则
    javascript设计模式继承(上)
    这些年,我收集的JavaScript代码(一)
    ObjectiveC语法之KVO的使用
    面试中的Singleton
  • 原文地址:https://www.cnblogs.com/yerikm/p/8328046.html
Copyright © 2011-2022 走看看