Angular *ngIf 绑定到函数

Question

我想问一下 *ngIf 绑定到函数返回值的问题。比较 *ngIf 绑定到属性时是否会产生性能开销。

这只是询问概念的示例代码，数据结构比DataService中的复杂。启用标志将保存在地图对象中。这只是一个简单的表达方式：

在打字稿服务中

export class DataService() {
   private enable: boolean;

   isEnable() {
      return enable;
   }

   getEnableValue() {
      return enable;
   }

   update(flag: boolean) {
      enable = flag;
   }
}

在html中，

<div *ngIf="isEnable()">
    <p> {{ testObject.value }}</p>
</div>

在打字稿中，

isEnable() {
   return this.dataService.isEnable();
}

对比

在html中，

<div *ngIf="isEnable">
    <p> {{ testObject.value }}</p>
</div>

在打字稿中，

isEnable: boolean;
ngOnInit() {
    isEnable = this.dataService.getEnableValue()
}

对于*ngIf="isEnable"，我可以理解。但是对于函数绑定，是角度检查函数中的属性并监控它的变化吗？有什么性能差异吗？

非常感谢。

Answer 1

从技术上讲，性能没有明显差异。

当 Angular 编译 AOT 模板时，它们会被转换成 JavaScript 源代码，而所有这些单向绑定都会变成函数。

因此，在执行以下任何操作时，我不应该有任何明显的表现。

export class MyComponent {
     public title1: string;

     public get title2(): stirng {
          return this.title1;
     }

     public getTitle3(): string {
          return this.title1;
     }
}

使用上述所有 3 个将具有大致相同的性能。

缺点

使用函数有副作用。

• 它打破了模板的干性原则
• 您无法看到模板有多复杂
• 性能隐藏在函数内部

我还发现您倾向于在模板中做更多的工作。当您调用函数时，可以更轻松地使用*ngIf、*ngFor 和其他逻辑组件。

当您阅读组件的源代码时，您并没有获得完整的图片。很多业务逻辑都是在模板里面做的，看模板看不出来怎么看，因为模板里面有很多逻辑。