输入和输出，如何使用它们来遵循 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();

但是，如果不允许使用 on 前缀，我发现很难将 @Input 名称与 Output 名称分开。

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

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

此外，如果 outside 不再是同一名称，outsideClick 将不知道要执行什么，或者我错过了什么？

我应该如何在此处命名 @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“双向绑定”的缩写

[(name)]="someProp"

如果您使用 @Input() 和 @Output()（首选方式），则不需要 inputs: [] 和 outputs: []。这是做同一件事的两种方法，如果您同时使用这两种方法，那一种是多余的。

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

(nameChange)="onNameChange($event)"

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

如果事件不是 input/output 对的一部分，您可以或应该省略 Change

(loggedIn)="onLoggedIn($event)

Input and outputs, how to work with them to follow the naming convention of the Angular 2's styleguide?