相当标准的情况。
有一个父组件<item-list>
。
在其模板内*ngFor
生成了20个子组件<item-block>
。
子组件样式设置为[ngStyle]
调用函数的指令和模板表达式setStyles()
.
问题(或者可能不是)是,当在一个特定子元素上发出任何事件时,表达式setStyles()
每个子组件执行两次。
因此,如果我们单击示例中的一项特定项目,我们就会有 20<item-block>
成分 -setStyles()
将被执行20+20次。
问题是:
- 为什么会发生这种情况以及这是预期的行为吗?
- 它如何影响性能
- 如何避免这种情况 - 每个子组件/检测更改仅调用一次。
示例和 plnkr:
plnkr(单击项目 - 打开控制台以进行调试输出) http://embed.plnkr.co/q5JH4oO365TyjviawUTB/
import {Component} from '@angular/core'
@Component({
selector: 'item-list',
template: `
<item-block
[item]="item"
*ngFor="let item of items"
></item-block>
`,
})
export class ItemListComponent {
items: any[] = [];
constructor() {}
ngOnInit() {
// generate dummy empty items
for (let i = 0; i < 20; i++) {
this.items.push(
{
value: 'item #' + i;
}
)
}
}
}
import {Component, Input} from '@angular/core'
@Component({
selector: 'item-block',
template: `
<div
class="item"
[ngStyle]="setStyles()"
(click)="testClick($event)"
>{{item.value}}</div>
`,
})
export class ItemBlockComponent {
@Input() item: any;
constructor() {}
testClick(): void{
console.log('item clicked');
}
setStyles(){
console.log('seting styles...');
return {
'background': '#ccc'
};
}
}
[ngStyle]="setStyles()"
causes setStyles
每次运行更改检测时都会调用(这可能很频繁并且会损害性能)。也因为setStyles()
每次返回不同的对象实例,都应该引发异常。 “自上次检查以来表达式已更改”或类似内容。
不鼓励以这种方式从视图调用方法。
而是将值分配给属性并绑定到该属性:
[ngStyle]="myStyles"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)