在运行 ng generate component f3fc15c0228dc320ab4107d8220f2b42 命令后创建angular组件的时候，默认情况下会生成四个文件：
一个组件文件 f3fc15c0228dc320ab4107d8220f2b42.component.ts一个模板文件 f3fc15c0228dc320ab4107d8220f2b42.component.html一个 css 文件， f3fc15c0228dc320ab4107d8220f2b42.component.css测试文件 f3fc15c0228dc320ab4107d8220f2b42.component.spec.ts【相关教程推荐：《angular教程》】
模板，就是你的html代码，需要避免在里面调用非事件类的方法。举个例子
<!--html 模板--><p> translate name: {{ originname }}</p><p> translate name: {{ gettranslatedname('你好') }}</p><button (click)="onclick()">click me!</button>
// 组件文件import { component } from '@angular/core';@component({ selector: 'my-app', templateurl: './app.component.html', styleurls: ['./app.component.css'],})export class appcomponent { originname = '你好'; gettranslatedname(name: string): string { console.log('gettranslatedname called for', name); return 'hello world!'; } onclick() { console.log('button clicked!'); }}
我们在模板里面直接调用了gettranslatedname方法，很方便的显示了该方法的返回值 hello world。看起来没什么问题，但如果我们去检查console会发现这个方法不止调用了一次。
并且在我们点击按钮的时候，即便没想更改originname，还会继续调用这个方法。
原因与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 '@angular/core';@component({ selector: 'my-app', templateurl: './app.component.html', styleurls: ['./app.component.css'],})export class appcomponent implements oninit { originname = '你好'; translatedname: string; ngoninit(): void { this.translatedname = this.gettranslatedname(this.originname) } gettranslatedname(name: string): string { console.count('gettranslatedname'); return 'hello world!'; } onclick() { console.log('button clicked!'); }}
或者使用pipe，避免文章过长，就不详述了。
更多编程相关知识，请访问：编程视频！！
以上就是angular中为什么不要在模板中调用方法的详细内容。