javascript – 输入和输出,如何使用它们来遵循Angular 2的样式指南的命名约定？

在我知道更好之前,我曾经将我的指令定义为：

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

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

但后来我读了样式指南,它说你不应该在输出前加上,因为Angular 2支持模板中的on语法.

所以我试图将其改为：

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

但是,如果不允许使用on前缀,我发现很难将@Input名称与输出名称分开.

在你可以命名@Input和@Output同样的事情之前,如果在导出的类中声明两者,那么这将不再起作用,因为将抛出错误.

如果我将@Input命名为outside而@Output命名为outsideClick,那么它们并不合理,因为它们都是同一个东西. outside是我想在调用outsideClick时执行的函数.

另外,如果外面不再是同一个东西,那么outsideClick将不知道要执行什么,或者我错过了什么？

我应该如何在这里命名@Input和@Output变量,以便它仍然有效,并且与第一个示例中的一样有意义？

编辑：

用法示例：

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

最佳答案:

绝对不要使用.在JavaScript事件中也不要以on开头.只有事件处理程序才有. JS中没有onClick事件.单击事件名称,如果为onClick分配函数,则在收到click事件时将调用此函数.

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

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

这允许Angular2“双向绑定”的简写

[(name)]="someProp"

如果使用@input()和@Output()(首选方式),则不需要输入：[]和输出：[].这两种方法可以做同样的事情,如果你使用两种方法都是多余的.

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

(nameChange)="onNameChange($event)"

在收到nameChange事件时要调用事件处理程序onNameChange.

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

(loggedIn)="onLoggedIn($event)