Angular不要在模板中调用方法的原因有哪些

这篇文章主要介绍Angular不要在模板中调用方法的原因有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

为白城等地区用户提供了全套网页设计制作服务，及白城网站建设行业解决方案。主营业务为成都网站建设、网站建设、白城网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

在运行 ng generate component 命令后创建angular组件的时候，默认情况下会生成四个文件：

一个组件文件 .component.ts
一个模板文件 .component.html
一个 CSS 文件， .component.css
测试文件 .component.spec.ts

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



  translate Name: {{ originName }}


  translate Name: {{ getTranslatedName('你好') }}

Click Me!

// 组件文件
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!');
  }
}

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 '@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不要在模板中调用方法的原因有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

当前题目：Angular不要在模板中调用方法的原因有哪些
分享路径：http://kswsj.cn/article/gpdpsj.html

关于创新互联

Angular不要在模板中调用方法的原因有哪些

其他资讯