在Angular2中,为什么在setTimeout之后有2次检查内容和视图?
这是我的代码
@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只检查一次并忽略可能的副作用. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |