Question

当我在Angular组件的视图中调用函数时，该函数会被反复调用。例如：

nightclub.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;
  }
}

nightclub.component.html

{{doStuff()}}

这将一遍又一遍地调用doStuff（）方法。

问题：

有人会这样做吗？如果是这样，在什么情况下这会有益？

Answer 1

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

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

示例：

如果要解析文本，那么管道将是一个不错的选择，因为它可以被记住

如果对数据的更改可能发生在无法使用Inputs和Outputs的组件之外，那么Observable将是一个不错的选择。

Answer 2

除了答案和评论外，我还会添加一些建议，以优化您的代码。首先，从上一个ng-conf（“优化Angular应用程序-Minko Gechev”）中了解一下经过解释的video（约40分钟）。

主要思想是在组件中使用OnPush更改检测策略，对示例中的方法和函数备注使用Pure Pipes。

但是，如果您的组件中有OnPush策略，并且更改来自“ Angular的外部”，您还可以向组件中注入ChangeDetectorRef并手动调用markForCheck()（有关更多详细信息，请查看official documentation）

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

问题：

2 个答案: