Angular2 @Inputs 应该是公共的还是我们可以应该通过将它们设为私有来拥有更严格的 API

typescript

Angular2 @Inputs：公共的还是私有的？

在Angular2中，@Inputs装饰器被用于定义组件的输入属性。这些输入属性允许从父组件向子组件传递数据。然而，对于这些@Inputs属性，我们应该将它们设为公共的还是私有的呢？

公共的@Inputs属性：开放性和灵活性

将@Inputs属性设为公共的意味着它们可以从组件外部进行访问和修改。这种开放性和灵活性有时是非常有用的，特别是当我们需要在父组件中动态更新子组件的某些属性时。

例如，考虑一个名为"UserComponent"的组件，它接受一个名为"user"的@Input属性。这个属性用于显示用户的姓名和年龄。将该属性设为公共的，可以使得父组件能够在用户信息发生变化时更新子组件的显示。

typescript
@Component({
  selector: 'app-user',
  template: <code>
    <div>
      <h2>{{ user.name }}</h2>
      
Age: {{ user.age }}
    </div>
  </code>
})
export class UserComponent {
  @Input() user: User;
}

在这个例子中，我们可以在父组件中修改"user"属性，然后子组件会自动更新显示用户的姓名和年龄。

私有的@Inputs属性：封装性和安全性

将@Inputs属性设为私有的意味着它们只能在组件内部访问和修改。这种封装性和安全性可以帮助我们避免意外的数据更改，从而提高代码的可维护性和稳定性。

例如，考虑一个名为"CalculatorComponent"的组件，它接受两个数字作为@Input属性，并提供了一个计算它们和的方法。将这些属性设为私有的可以确保它们只能在组件内部使用，从而避免了外部对这些属性的意外更改。

typescript
@Component({
  selector: 'app-calculator',
  template: <code>
    <div>
      <input type="number" [(ngModel)]="num1">
      <input type="number" [(ngModel)]="num2">
      <button (click)="calculate()">Calculate</button>
      
Result: {{ result }}
    </div>
  </code>
})
export class CalculatorComponent {
  private num1: number;
  private num2: number;
  private result: number;
  calculate() {
    this.result = this.num1 + this.num2;
  }
}

在这个例子中，将"num1"和"num2"属性设为私有的可以确保它们只能在组件内部进行计算，并且无法从外部进行更改。

选择何种方式

选择将@Inputs属性设置为公共的还是私有的取决于具体的需求和设计。如果需要在父组件中动态更新子组件的属性，那么将其设为公共的是非常有用的。然而，如果希望保持数据的封装性和安全性，那么将其设为私有的是更好的选择。

在实际开发中，我们可以根据具体的场景来决定@Inputs属性的可见性，以获得最佳的代码设计和可维护性。