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();
}

vs

在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和其他逻辑组件。

阅读该组件的源代码时，您将无法获得完整的画面。模板中有很多业务逻辑，而当您阅读模板时，您看不到如何查看它，因为模板中有很多逻辑。

角度* ng如果绑定到函数

1 个答案:

缺点