假设我有一个包含以下代码的页面:
“Pure”HTML:
<img [src]="urlParams.includes('search') ? 'search-icon' : urlParams.includes('detail') ? 'detail-icon' : 'empty-icon'"/>
<div *ngIf="(a && b) || (!a && c && d) "> ... </div>
我决定要更清晰的html文件,并将一些逻辑移到控制文件中,如下所示:
HTML:
<img [src]="decideParameter(urlParams)"/>
<div *ngIf="decideExpression(a,b,c,d)"></div>
AND在相应的控件.ts文件中:
decideParameter(urlParams: any) {
if (urlParams.includes('search')) {
return "search-icon";
}
if (urlParams.includes('detail')) {
return "detail-icon";
}
return "empty-icon";
}
decideExpression(a, b, c, d){
return (a && b) || (!a && c && d);
}
我的代码有时会包含更复杂的条件,这些条件有时会绑定到属性,这些条件会发生很大变化。这些属性和变量有时来自* ngFor even。在那种情况下,哪种方法更好?要将这些表达式提取到控制文件中,还是将其保留在html中?
正如我想知道的那样,我注意到,如果我提取这些代码,并将console.log插入到提取的类中,如下所示:
decideExpression(a, b, c, d){
console.log("method called!")
return (a && b) || (!a && c && d);
}
所以我的问题是: 从HTML到.ts方法提取属性绑定表达式是否会生成更多更新检查? (或者,无论如何它已经更新了吗?)
答案 0 :(得分:0)
不,它没有,它完成相同数量的检查,每次渲染一次。 Angular在每个异步事件之后进行渲染,如XHR事件,键盘事件,鼠标事件等。在您的重构之前已经是这种情况了
如果您想了解模板中表达式的一些详细信息,可以查看official doc