输入和输出，如何使用它们以遵循 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 之前，如果在导出的类中同时声明两者，那么这将不再有效，因为将引发错误。

如果我将@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。

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

(loggedIn)="onLoggedIn($event)