javascript - 输入和输出，如何使用它们来遵循 Angular 2 风格指南的命名约定？

Question

在我了解之前，我曾经像这样定义我的指令:

...
inputs: [
  'onOutside'
]
... 

export class ClickOutsideDirective {
  @Output() onOutside: EventEmitter<any> = new EventEmitter();
}

但后来我阅读了风格指南，它说你不应该在输出前加上 on 前缀因为 Angular 2 支持 on-模板中的语法。

所以我想把它改成这样:

@Input() outsideClick: any;
@Output() outsideClick: EventEmitter<any> = new EventEmitter();

但是，我发现很难将 @Input 分开名称来自 Output如果您不允许使用 on 的名称字首。

在您可以同时命名 @Input 之前和 @Output同样的事情，但如果在导出类中声明两者，那么这将不再有效，因为将抛出错误。

如果我将 @Input 命名为至 outside和 @Output至 outsideClick ，这实际上没有意义，因为它们都是同一件事。 outside是调用 outsideClick 时我要执行的函数.

此外，outsideClick如果outside 不知道要执行什么名称不再是同一个东西，还是我遗漏了什么？

我应该如何命名 @Input和 @Output变量，以便它仍然可以工作并且与第一个示例中一样有意义？

编辑:

使用示例:

<div clickOutside [exceptions]="['.toggler']" (outside)="doSomethingOnOutsideClick()"></div> 

Answer 1

绝对不要使用on。在 JavaScript 中，事件也不要以 on 开头。只有事件处理程序可以。 JS 中没有onClick 事件。事件名称是 click，如果您将函数分配给 onClick，则在收到 click 事件时将调用此函数。

如果您有属于一起的输入和输出，请命名它们

@Input() name:any; 
@Output() nameChange: EventEmitter<any> = new EventEmitter();;

这允许 Angular2 的“双向绑定(bind)”的缩写

[(name)]="someProp"

如果您使用@Input() 和@Output()(首选方式)，那么您不需要输入:[]和输出:[]。这是做同一件事的两种方法，如果您同时使用这两种方法，那一种就多余了。

要匹配浏览器命名方案，您可以做的是

(nameChange)="onNameChange($event)"

在接收到 nameChange 事件时调用事件处理程序 onNameChange。

当事件不是输入/输出对的一部分时，您可以或应该省略 Change

(loggedIn)="onLoggedIn($event)