在{{}}（Curly Brackets）中使用函數調用是一個好習慣嗎？

Question

在{{}}（Curly Brackets）中使用函數調用是一個好習慣嗎？

有沒有辦法做到這一點？ 例如，在組件中（可能使用ngOnChanges或類似的東西......）

模板

<div class="container">
    {{ bootstrap() }}
    {{ validate() }}  
    <textarea class="form-control">{{ fullHtml }}</textarea>
    <button (click)="copy()" class="btn btn-primary">Click to Copy HTML</button>
    <textarea class="form-control">{{ validator }}</textarea>
    <button (click)="copy()" class="btn btn-warning">Click to Copy Validate</button>

    <button class="btn btn-danger" (click)="add()">Add page and input</button>
</div>

零件

class HomeComponent {
    fullHtml = "";
    validator = "";
    pages = [{
        "name": "Page 1"
    },{
        "name": "Page 2"
    }];

    inputs = [{
        "name": "input_1",
        "required": true
    },{
        "name": "input_2",
        "required": false
    }];

    public bootstrap() {
        this.fullHtml = this.pages.map((page, pageNumber) => {
            return '<div class="row">' +
                page.name +
                '</div>'
        }).join('')
    }

    public validate(){
        this.validator = this.inputs.map((input, i) => {
            return '"' + input.name + '" => [' + (input.required? 'required': 'nullable') + '],\n';
        }).join('')
    }

    public copy(){
        alert("under construction");
    }

    public add(){
        this.pages.push({
            name: "page 3"
        });
        this.inputs.push({
            "name": "input_3",
            "required": true
        });
    }
}

https://jsfiddle.net/1hk7knwq/10283/

PS。 我需要在textarea中顯示HTML內容，這就是我在組件內部執行html的原因。

Answer 1

你的問題的答案是：它取決於。

如果函數的執行時間很短，那很好。 如果該功能包括許多復雜的計算，需要很長時間才能完成，那么它可能會導致用戶體驗出現嚴重問題。

這是Angular團隊在其官方文件中所說的：

快速執行

Angular在每個更改檢測周期后執行模板表達式。 更改檢測周期由許多異步活動觸發，例如承諾解析，http結果，計時器事件，按鍵和鼠標移動。

表達式應該快速完成或用戶體驗可能會拖累，尤其是在較慢的設備上。 在計算成本昂貴時考慮緩存值。

供參考： https ： //angular.io/guide/template-syntax#quick-execution

Answer 2

車把內的功能調用（雙重卷曲）是合法的。 但是，如果你在函數中使用console.log ，你會看到它經常被調用，以便盡可能保持輕量級，或者如果它是純函數則記住它。 見lodash memoize 。

如果函數沒有參數（或者可以重寫為不接受參數），那么你可以使用TypeScript getter，如下所示：

get something() {
  // do some code here
  // return 5
}

現在，您可以在HTML模板中使用{{ something }} 。 值得在這里放置一個console.log來查看它是否被調用的次數少於等效的函數。

Answer 3

Angular有一個非常方便的功能，允許將數據直接綁定到方法調用的結果。 通過使用Angular的模板綁定語法為方法分配屬性，將在每個更改檢測周期重新計算結果。 雖然這很方便，但它也會將這些計算結果添加到每個變化檢測周期的成本中。 此成本有可能極大地影響應用程序的響應性，例如，當綁定到方法與ngFor結合時。 當發生這種情況時，通常有兩種方法可以提高性能：預先計算結果或將方法實現為純管道。

將ngFor與方法調用結合使用的最常見情況是基於顯示的每個條目執行計算。 不是在每次更改檢測時重新計算顯示值，而是通常有機會根據需要計算其他屬性。 例如，請考慮以下代碼：

<ul>
  <li *ngFor="let instractor of instractorList">
    <span>Upccoming classes {{numClasses(instractor)}}</span>
  </li>
</ul>

一個簡單的模板綁定，在每個更改檢測周期中為instructorList中的每個條目執行numClasses

模板的支持組件類無需預先處理即可獲取其數據。 以下實現定義了從模板調用的方法

<ul>
  <li *ngFor="let instractor of instractorList">
    <span>Upccoming classes {{instractor.numClasses}}</span>
  </li>
</ul>

在此示例中，僅在列表更改時才重新計算對象屬性。 這種情況發生的頻率明顯低於每個變化檢測周期，可能再也不會發生 這是處理此類情況的最佳方式，但有時可能很難實現。