Angular:管道与模型中的方法

Question

我在这个例子中使用模型中的函数:

//user.madel.ts
class User {
    getFullname () {
        return this.firstname + '  ' + this.lastName;
    }
}

// in html I can do this:
<span> {{ user.getFullName() }} <span>

是否应该使用管道？

Answer 1

Angular 管道最适合单个值，因为纯管 Prop 有性能优势。由于 firstname 和 lastname 都将被更改，因此纯管道不是一个选项，它将以任何一个结尾

{{ user.firstname | fullname(user.lastname }}

或

{{ user | fullname }}

不纯管道，与 getter 方法相比没有性能优势。

如果计算成本低，它可以是 getter 方法或 get 属性访问器:

get fullname () {return this.firstname + '  ' + this.lastname;}

否则出于性能原因应缓存返回值。