在 Angular 4 个组件的上下文中获取函数有什么好处？

Question

我很好奇Angular4:

这两个函数有什么区别

get currentIndex(): number {
  return `Current Index is ${this.index}`;
}

public currentIndex(): number {
  return `Current Index is ${this.index}`;
}

他们做的事情完全一样吗？如果是这样，他们什么时候会做一些不同的事情？

Answer 1

它们几乎相同，只是 functions/methods 倾向于暗示计算。因此，当您只是访问数据（如本例中的索引）时，函数可能看起来很奇怪或看起来有点矫枉过正。

使用 getter 是一种两全其美的方法。它看起来像简单的数据访问 - currentIndex 与 currentIndex() - 同时允许您在以后需要执行类似计算的操作时添加逻辑。

虽然从技术上讲它们是不同的，但您可以使用 TypeScript PlayGround 查看它们如何编译成不同的代码。

Answer 2

getter/setter 与属性的关系多于方法，因此最好将 getter/setter 与普通的属性进行比较。

和调用 getter/setter 与任何普通属性相同，仅实现 getter 表示只读属性并且仅实现 setter 表示只写属性.

getter 和 setter 添加额外层以直接与属性交互，例如

class Person {
 private _age:number;
 public get age() {
   //... do something 
   retutn this._age; 
 }

 public set age(value) {
   if (value >0){
    this._age = value
   }
 }
}

在上面的示例中，我们防止为年龄分配无效值。

在angular中，如果我们想在teplate中显示一个getter，例如像这样{{age}}，但是如果年龄是一个函数，就会像这样{{age()}}

正如我之前提到的，将 getter/setter 视为属性比方法

更好

根据你的例子

get currentIndex(): number {
  return `Current Index is ${this.index}`;
}

上面的 getter 可能会给出来自服务的值或另一个属性的计算值，并且看起来像正常的属性

setter , getter

在 Angular 4 个组件的上下文中获取函数有什么好处？

What benefit to get functions provide in the context of Angular 4 Components?

web-component

getter-setter

typescript

angular