Angular2 @Inputs应该是公开的,还是可以/我们应该通过将它们设为私有来实现更严格的API？

Question

我正在使用带有Typescript的Angular2

假设我的app组件模板中有以下内容:

... 
<coffee-cup [coffee]=""
...

我的coffee-cup组件:

@Component({
  selector: 'coffee-cup',
  ...
})
export class CoffeeCup {

  @Input() 
  public coffee = 0;

}

我目前不确定我的输入应该是什么样子.它可能看起来像这样:

@Input()
public coffee = 0;

要么

@Input()
private coffee = 0;

我目前倾向于将成员变量咖啡私有化.

• 我想为组件定义一个清晰的公共API
• 我只想通过模板公开设置coffee属性
• 我目前没有任何理由允许直接从父组件读取或设置咖啡.如果需要,我可以删除私有修饰符.

我查看组件的方式是有两个单独的API与之交互:

1. 模板API,由@Inputs和组成@Outputs
2. Typescript API由所有公共属性和方法组成

我没有检查在下列情况下发生了什么,但是,它可能会改变答案:

• 假设咖啡成员是公开的.如果我appComponent能存取CoffeeCup使用@ViewChild,并设置咖啡成员,将生命周期挂钩(像ngOnChange)火？

重申一下这个问题:Angular2应该@Input是公开的,还是应该通过将它们设为私有来实现更严格的API？

Answer 1

首先,从API设计的角度来看,这@Input意味着公开.从角度来看也是如此,这些装饰器描述了与组件交互的接口.

该@Input装饰或任何其他装饰元在让你的意图的角度知道的方式使用的角度,并有更好的理解模板和它与组件类关系.

在某些情况下,它也被变化检测引擎使用.例如,@Input是由更改检测跟踪的字段,它向CD引擎提示应该监视此属性.

拥有@Input装饰器的私有属性不应该在运行时有任何影响.这个修饰符是虚拟的,它在TypeScript到JavaScript编译后消失了.

但是,根据您的环境,可能会出现一些影响:

一般来说,使用TypeScript和元数据的一大好处就是拥有一个智能IDE,这意味着IDE可以在您编写代码时为您提供帮助.拥有私有属性可能会也可能不会影响它,具体取决于每个IDE的实现.拥有@Input属性将导致IDE在为该组件编写HTML标记时在智能感知窗口上显示该属性.

另一个风险因素是未来对打字稿中的缩小/丑化的支持.顾名思义,私人财产在其他地方使用.这种特性意味着编译器可以更改私有属性的名称,因此它们占用更少的字节,这也使它们"更私密",因为标识符可能会从构建更改为构建.例如:private mySpecialProperty: string在缩小之后p1,编译器将更改对类中此标识符的所有引用以进行匹配p1.因此,今天有这个可行,但将来它可能会限制构建功能.

需要考虑的另一点是,虽然angular不关心编译器所做的修饰符,但动态组件创建将受到限制.换句话说,在html标记中创建组件将没有任何问题,但使用该组件动态创建组件ComponentResolver -> ComponentFactor将受到限制,因为您将无法使用代码将这些输入分配给组件的实例.如果你不打算这样做,那你很好.

如果您要构建其他人使用的组件,则必须使用公共修饰符@Input/@Output.您组件的用户应该能够动态创建组件.

这也回答了关于在父/子组件上访问这些属性以获取对咖啡组件的引用的问题.只能通过模板标记进行绑定.例如,您将无法手动注册到EventEmitter咖啡组件上注册的s.这有时是必需的,请参阅此方案作为一个示例.

至于生命周期钩,它不应该有任何影响,因为角度不检查类型,但进行存在检查.

因此,总而言之,在大多数用例中你不应该有任何问题,但随着你的应用程序的进展,你可能会解决一些问题,或者没有.您可能还需要在将来选择退出高级缩小功能......