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

Question

假设我有一个包含以下代码的页面：

“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方法提取属性绑定表达式是否会生成更多更新检查？ （或者，无论如何它已经更新了吗？）

Answer 1

不，它没有，它完成相同数量的检查，每次渲染一次。 Angular在每个异步事件之后进行渲染，如XHR事件，键盘事件，鼠标事件等。在您的重构之前已经是这种情况了

如果您想了解模板中表达式的一些详细信息，可以查看official doc