首页 >web前端 >js教程 > 正文

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

转载2021-09-30 10:36:470610
本篇文章给大家介绍一下Angular中不在模板(template)里面调用方法的原因,以及解决方法,希望对大家有所帮助!

在运行 ng generate component <component-name> 命令后创建angular组件的时候,默认情况下会生成四个文件:

  • 一个组件文件 <component-name>.component.ts
  • 一个模板文件 <component-name>.component.html
  • 一个 CSS 文件, <component-name>.component.css
  • 测试文件 <component-name>.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!');
  }
}

1.png

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

2.png

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

3.png

原因与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中为什么不要在模板中调用方法的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Angular 模板 调用方法
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    JavaScript如何创建随机整数542
    javascript中reduce()方法是干什么的488
    javascript事件委托是什么意思972
    推荐视频教程
  • 小猫杯AngularJS视频教程小猫杯AngularJS视频教程
  • angular.js中文教学视频教程angular.js中文教学视频教程
  • AngularJS开发Web应用程序基础实例视频教程AngularJS开发Web应用程序基础实例视频教程
  • Angular js入门篇Angular js入门篇
  • 视频教程分类