代码之家 › 专栏 › 技术社区 › Willem van der Veen

Angular2+调用视图/模板中的函数

angular-components typescript angular javascript

0

Willem van der Veen · 技术社区 · 7 年前

当我从角度组件的角度调用函数时,函数会被一次又一次地调用。例如:

夜总会.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-nightclub',
  templateUrl: './nightclub.component.html',
  styleUrls: ['./nightclub.component.css']
})
export class NightclubComponent {
  doStuff(): number {
    return 1;
  }
}

{{doStuff()}}

这将一遍又一遍地调用doStuff()方法。

问题:

2 回复 | 直到 7 年前

1

4

Nico 7 年前

这将被称为每个更改检测周期-不建议在模板内使用函数,因为它不会对性能造成很大影响。

要在模板上显示的函数/数据的实现高度依赖于您的用例。

例子:

如果正在解析文本,那么管道将是一个很好的选择,因为它可以被记住

Inputs 和 Outputs 如果不能使用,那么一个可观测的将是一个好的选择。

2

1

shohrukh 7 年前

除了回答和评论之外,我还将添加一些建议,以优化您的代码。 video (~40分钟)从最后一次ng形态(“优化角度应用程序-Minko Gechev”)。

其主要思想是在组件中使用OnPush更改检测策略,对示例中的方法和函数的备忘录使用纯管道。

但是如果你的组件中有OnPush策略,并且改变来自“外部角度的世界”,你也可以注入 ChangeDetectorRef 到组件并手动调用 markForCheck() (有关更多详细信息,请查看 official documentation