角属性绑定-提取还是不提取？

Question

假设我有以下代码的某一页：

“纯”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>

并在相应的控件.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。在这种情况下，什么样的方法更好呢？将这些表达式提取到控制文件中，还是将其保留在html中？

当我想知道这一点时，我注意到，如果我提取这些代码，并在提取的类中插入一个console.log，如下所示：

 decideExpression(a, b, c, d){
    console.log("method called!")

    return (a && b) || (!a && c && d);
  }

我可以看到，每一次鼠标移动都会出现这样的情况：

​

所以我的问题是:从HTML .ts方法中提取属性绑定表达式会产生更多的更新检查吗？(或者，它是否已经更新了那么多？)

Answer 1

不，它没有，它做了完全相同的检查量，每个渲染一个。在每个异步事件之后进行呈现，如XHR事件、键盘事件、鼠标事件等。在你的重构之前已经是这样了

如果需要模板中有关表达式的一些详细信息，可以检查此官方医生