避免在angular中多次調(diào)用函數(shù)

正如@dan vid的鏈接帖子中所述，模板中的函數(shù)調(diào)用是一種不好的做法，因?yàn)樗鼈儗⒃诿看胃臋z測時(shí)執(zhí)行。

因此，您可以使用管道，也可以pre-calculates指定相應(yīng)的值。

Pipe

如果使用管道，仍然會(huì)多次計(jì)算值，但前提是管道的輸入值發(fā)生變化，這與模板中的函數(shù)調(diào)用相比，會(huì)大大減少re-calculation的次數(shù)。

基本管道如下所示：

@Pipe({ name: 'isAlreadyActive' })
export class IsAlreadyActivePipe implements PipeTransform {

  transform(id: string): boolean { // <- or any other return type instead of boolean
    // Implement your check and return the result
  }

}

在你的情況下，電話是這樣的：

<option  
  ...
  title="{{ site.id | isAlreadyActive ? 'Site is already added.': '' }}" 
  ...
  >
  {{site.name}}
</option>

你可以在這里找到更多關(guān)于管道的信息。

將條件結(jié)果存儲(chǔ)在變量中

還可以將管道返回值存儲(chǔ)在變量中（請(qǐng)參見此處）。

這看起來像這樣：

<ng-container *ngIf="site.id | isAlreadyActive as isActive">
  <option  
    ...
    title="{{ isActive ? 'Site is already added.': '' }}" 
    ...
  >
  {{site.name}}
  </option>
</ng-container>

在本例中，我們將結(jié)果存儲(chǔ)在isActive中，您的計(jì)算只會(huì)執(zhí)行一次，但只要返回值為falsy，就不會(huì)顯示*ngIf的內(nèi)容。

例如，在您的例子中，您可以返回一個(gè)包含布爾值的and對(duì)象，而不是一個(gè)簡單的布爾值，例如，{ isActive: returnValue }。這樣，您的返回值將為truthy，并且將顯示內(nèi)容。

Pre-Calculation

另一個(gè)選項(xiàng)是pre-calculate組件中的值，并將該值分配給site.isActive作為示例。這樣，您只需進(jìn)行一次計(jì)算，這也比從模板調(diào)用函數(shù)要好。