在我了解之前,我曾经像这样定义我的指令:
...
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>
最佳答案
绝对不要使用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)
关于javascript - 输入和输出,如何使用它们来遵循 Angular 2 风格指南的命名约定?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39930326/