angular - 使用模板插值多次调用函数？

Question

对不起，基本问题，我正在尝试使用基本示例来理解 angular2 流程。

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

@Component({
    selector:'my-app',
    template:'Test {{ getVal() }}'
})

export class AppComponent{ 
    getVal():void{
        console.log("demo text")
    }
}

运行此示例后，“演示文本”在控制台中可见 4 次，为什么会这样？谢谢。

Answer 1

不鼓励绑定到模板中的函数或方法，因为每次运行更改检测时都会调用这些函数。

您至少应该在函数内缓存结果，以避免重复重新计算潜在的昂贵计算。

更好的方法是在结果依赖的属性更改时重新计算结果，并将结果分配给属性并从视图绑定到该属性。