加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

在Angular2中,为什么在setTimeout之后有2次检查内容和视图?

发布时间:2020-12-17 17:04:27 所属栏目:安全 来源:网络整理
导读:这是我的代码 @Component({ template: `h1Hello from A/h1 ul li *ngFor="#letter of letters; #i = index" button (click)="appendW(i)"{{letter | uppercase}}/button /li /ul button (click)="doSomething()"Click/button`,pipes: [UpperCasePipe],direct
这是我的代码

@Component({
  template: `<h1>Hello from A</h1>
  <ul>
    <li *ngFor="#letter of letters; #i = index">
      <button (click)="appendW(i)">{{letter | uppercase}}</button>
    </li>
  </ul>
  <button (click)="doSomething()">Click</button>`,pipes: [UpperCasePipe],directives: [NgFor]
})
export class AComponent {
  letters = ['a','b','c','d'];
  contructor(){

  }

  appendW(index) {
    // console.log(letter);
    setTimeout(()=>{
      this.letters[index] += "W";
    },1000)
  }
  ...
}

Plnkr

在setTimeout之后,对内容和视图进行两次角度检查.有人可以解释一下吗?为什么角度需要检查TWICE?

解决方法

Angular利用区域通过修补一些异步API(如addEventHandler,setTimeout,…)来了解事件何时完全处理,然后在每个事件后运行更改检测.

在开发模式下,Angular会在第一个之后执行额外的更改检测.因为两者之间没有任何事件,所以不应该发生任何变化.

如果模型仍然改变,Angular认为这是一个可能的错误.

可能的原因:

>视图绑定的字段,getter或函数每次都返回一个不同的实例,这被识别为更改.
这通常使用返回数组的已过滤子范围的函数.
除非过滤条件已更改,否则应将此子范围分配给字段并返回相同的高速缓存实例.
Angular仅比较先前和当前返回的数组的标识,并忽略数组(或其他对象)的内容是否仍然相同.
>未在Angulars修补区域中注册的事件调用的代码导致模型更改.
这通常是由未在Angular中初始化的第三方库引起的.
如果可能,在Angular中初始化它们,或者通知Angular有关更改(Triggering Angular2 change detection manually)

在生产模式中,Angular只检查一次并忽略可能的副作用.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读