angular - 在 html 中调用方法的 Angular 2 性能问题

问题描述

我想问我召唤的更好方法。

假设我有一个类人类

export default class Human {
    private firstname: string;
    private lastname: string;

    public getFirstName():string {
      return this.firstname;
    }

    public setFirstName(val : string ) {
      this.firstname = val;
    }

    public getLastName():string {
      return this.lastname
    }

    public setLastName(val : string ) {
      this.lastname = val;
    }

    public getFullName(): {
      return `${this.firstname} + ' ' + ${this.lastname}; 
    }
}

TS：

human: Human;

 // below some http call which asigns human class to response...
// Response variables assigned to class variables , f.e : human.setFirstName(data.firstname)

HTML：

<h2>{{human.getName()}}</h2>

并且看起来合乎逻辑，一切都会很好，除了它在每次更改时调用该函数，每一秒。做同样事情的更好方法是什么？（我不想有变量，因为后端变化很大，我想在那里拥有所有功能）。+ 如果我使用变量，我必须更改整个前端应用程序 html 中的所有变量，而函数我只需要更改函数内部变量。

标签： angulartypescript

这里的方法是您需要构建角度友好的视图模型。模板中的函数调用通常是不好的做法，因此，您的视图模型应该避免这种需要。就这么简单：

export class HumanVm {
   firstName: string
   lastName: string
   fullName: string

   constructor(human: Human) {
     this.firstName = human.firstName
     this.lastName = human.lastName
     this.fullName = `${this.firstname} ${this.lastname}`
   }

}

然后，如果需要在应用程序范围内更改某些内容，请在模型中对其进行更改以在构造函数中查看模型映射。这一点前期工作是您如何将自己与前端频繁的后端模型更改隔离开来，并且仍然保持良好的角度实践。

angular - 在 html 中调用方法的 Angular 2 性能问题

问题描述

解决方案

推荐阅读