Angular中為什么不要在模板中調(diào)用方法

第Angular中為什么不要在模板中調(diào)用方法在運(yùn)行nggeneratecomponentcomponent-name命令后創(chuàng)建angular組件的時(shí)候，默認(rèn)情況下會(huì)生成四個(gè)文件：

一個(gè)組件文件component-name.component.ts

一個(gè)模板文件component-name.component.html

一個(gè)CSS文件，component-name.component.css

測(cè)試文件component-name.component.spec.ts

模板，就是你的HTML代碼，需要避免在里面調(diào)用非事件類的方法。舉個(gè)例子

!--html模板--

translateName:{{originName}}

translateName:{{getTranslatedName(你好)}}

button(click)=onClick()ClickMe!/button

//組件文件

import{Component}from@angular/core

@Component({

selector:my-app,

templateUrl:./ponent.html,

styleUrls:[./ponent.css],

exportclassAppComponent{

originName=你好

getTranslatedName(name:string):string{

console.log(getTranslatedNamecalledfor,name);

returnhelloworld!

onClick(){

console.log(Buttonclicked!

}

我們?cè)谀０謇锩嬷苯诱{(diào)用了getTranslatedName方法，很方便的顯示了該方法的返回值helloworld?？雌饋頉]什么問題，但如果我們?nèi)z查console會(huì)發(fā)現(xiàn)這個(gè)方法不止調(diào)用了一次。

并且在我們點(diǎn)擊按鈕的時(shí)候，即便沒想更改originName，還會(huì)繼續(xù)調(diào)用這個(gè)方法。

原因與angular的變化檢測(cè)機(jī)制有關(guān)。正常來說我們希望，當(dāng)一個(gè)值發(fā)生改變的時(shí)候才去重新渲染對(duì)應(yīng)的模塊，但angular并沒有辦法去檢測(cè)一個(gè)函數(shù)的返回值是否發(fā)生變化，所以只能在每一次檢測(cè)變化的時(shí)候去執(zhí)行一次這個(gè)函數(shù)，這也是為什么點(diǎn)擊按鈕時(shí)，即便沒有對(duì)originName進(jìn)行更改卻還是執(zhí)行了getTranslatedName

當(dāng)我們綁定的不是點(diǎn)擊事件，而是其他更容易觸發(fā)的事件，例如mouseenter,mouseleave,mousemove等該函數(shù)可能會(huì)被無意義的調(diào)用成百上千次，這可能會(huì)帶來不小的資源浪費(fèi)而導(dǎo)致性能問題。

一個(gè)小Demo：

/edit/angular-ivy-4bahvofile=src/app/ponent.html

大多數(shù)情況下，我們總能找到替代方案，例如在onInit賦值

import{Component,OnInit}from@angular/core

@Component({

selector:my-app,

templateUrl:./ponent.html,

styleUrls:[./ponent.css],

exportclassAppComponentimplementsOnInit{

originName=你好

TranslatedName:string;

ngOnInit():void{

this.TranslatedName=this.getTranslatedName(this.originName)

getTranslatedName(name:string):string{

console.count(getTranslatedName

retu