在我知道更好之前,我曾经将我的指令定义为:
...
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)
原文地址:https://codeday.me/bug/20190516/1114845.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。