Angular中為什麼不要在模板中呼叫方法-js教程-PHP中文網

Angular中為什麼不要在模板中呼叫方法

青灯夜游

發布： 2021-09-30 10:36:47

轉載

1911 人瀏覽過

這篇文章跟大家介紹一下Angular中不在範本（template）裡面呼叫方法的原因，以及解決方法，希望對大家有幫助！

Angular中為什麼不要在模板中呼叫方法

在執行ng generate component <component-name></component-name> 指令後建立angular元件的時候，預設會產生四個檔案：

一個元件檔案 <component-name>.component.ts</component-name>
一個範本檔案 <component-name>.component.html</component-name>
一個CSS 文件， <component-name>.component.css</component-name>
測試文件 <component-name>.component.spec. ts</component-name>

【相關教學推薦：《angular教學》】

模板，就是你的HTML程式碼，需要避免在裡面呼叫非事件類別的方法。舉個例子

<!--html 模板-->
<p>
  translate Name: {{ originName }}
</p>
<p>
  translate Name: {{ getTranslatedName(&#39;你好&#39;) }}
</p>
<button (click)="onClick()">Click Me!</button>

登入後複製

// 组件文件
import { Component } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  templateUrl: &#39;./app.component.html&#39;,
  styleUrls: [&#39;./app.component.css&#39;],
})
export class AppComponent {
  originName = &#39;你好&#39;;

  getTranslatedName(name: string): string {
    console.log(&#39;getTranslatedName called for&#39;, name);
    return &#39;hello world!&#39;;
  }

  onClick() {
    console.log(&#39;Button clicked!&#39;);
  }
}

登入後複製

Angular中為什麼不要在模板中呼叫方法

我們在模板裡面直接呼叫了getTranslatedName方法，很方便的顯示了該方法的回傳值 hello world。看起來沒什麼問題，但如果我們去檢查console會發現這個方法不只呼叫了一次。

Angular中為什麼不要在模板中呼叫方法

並且在我們點擊按鈕的時候，即使沒想更改originName，還會繼續呼叫這個方法。

Angular中為什麼不要在模板中呼叫方法

原因與angular的變化偵測機制有關。正常來說我們希望，當一個值改變的時候才去重新渲染對應的模組，但angular並沒有辦法去檢測一個函數的返回值是否發生變化，所以只能在每次檢測變化的時候去執行一次這個函數，這也是為什麼點擊按鈕時，即便沒有對originName進行更改卻還是執行了getTranslatedName

當我們綁定的不是點擊事件，而是其他更容易觸發的事件，例如mouseenter, mouseleave, mousemove等此函數可能會被無意義的呼叫成百上千次，這可能會帶來不小的資源浪費而導致效能問題。

一個小Demo：
https://stackblitz.com/edit/angular-ivy-4bahvo?file=src/app/app.component.html

大多數情況下，我們總是可以找到替代方案，例如在onInit賦值

import { Component, OnInit } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  templateUrl: &#39;./app.component.html&#39;,
  styleUrls: [&#39;./app.component.css&#39;],
})
export class AppComponent implements OnInit {
  originName = &#39;你好&#39;;
  TranslatedName: string;

  ngOnInit(): void {
    this.TranslatedName = this.getTranslatedName(this.originName)
  }
  getTranslatedName(name: string): string {
    console.count(&#39;getTranslatedName&#39;);
    return &#39;hello world!&#39;;
  }

  onClick() {
    console.log(&#39;Button clicked!&#39;);
  }
}

登入後複製

或使用pipe，避免文章過長，就不詳述了。

更多程式相關知識，請造訪：程式設計影片！！

以上是Angular中為什麼不要在模板中呼叫方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！