Angular 17中如何用@if语法存储函数返回值并复用？

原来使用*ngIf时通过as关键字存储函数返回值的写法，在Angular 17的@if语法中可以通过变量声明语法实现，具体改写如下：

@if (getMatchingImage(); let info) {
  <div>
    <img class="empty-cart-img" [src]="info.imageUrl" width="70%" decoding="async" loading="lazy" alt="Empty List">
    <figcaption>
      <ng-content></ng-content>
    </figcaption>
  </div>
}

关键说明 #

• @if语法里用分号;分隔条件表达式和变量声明，let info会把getMatchingImage()的返回值绑定到info变量上
• 原代码中绑定*ngIf的外层<div>需要移入@if的大括号内部，因为@if是块级指令，不像*ngIf直接绑定在元素上实现结构控制

内容的提问来源于stack exchange，提问作者Yuvaraj V