Angular中为什么不要在模板中调用方法

第Angular中为什么不要在模板中调用方法在运行nggeneratecomponentcomponent-name命令后创建angular组件的时候，默认情况下会生成四个文件：

一个组件文件component-name.component.ts

一个模板文件component-name.component.html

一个CSS文件，component-name.component.css

测试文件component-name.component.spec.ts

模板，就是你的HTML代码，需要避免在里面调用非事件类的方法。举个例子

!--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!

}

我们在模板里面直接调用了getTranslatedName方法，很方便的显示了该方法的返回值helloworld。看起来没什么问题，但如果我们去检查console会发现这个方法不止调用了一次。

并且在我们点击按钮的时候，即便没想更改originName，还会继续调用这个方法。

原因与angular的变化检测机制有关。正常来说我们希望，当一个值发生改变的时候才去重新渲染对应的模块，但angular并没有办法去检测一个函数的返回值是否发生变化，所以只能在每一次检测变化的时候去执行一次这个函数，这也是为什么点击按钮时，即便没有对originName进行更改却还是执行了getTranslatedName

当我们绑定的不是点击事件，而是其他更容易触发的事件，例如mouseenter,mouseleave,mousemove等该函数可能会被无意义的调用成百上千次，这可能会带来不小的资源浪费而导致性能问题。

一个小Demo：

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

大多数情况下，我们总能找到替代方案，例如在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