9

在我知道更好之前，我曾经这样定义我的指令：

...
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名称与名称分开。Outputon

在您可以同时命名@Input相同@Output的事物之前，但如果在导出的类中同时声明两者，那么这将不再有效，因为将引发错误。

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

另外，如果不再命名相同的东西，或者我错过了什么，outsideClick就不知道要执行什么？outside

我应该如何在此处命名@Inputand@Output变量，以便它仍然有效并且与第一个示例中一样有意义？

编辑：

使用示例：

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

1 回答 1

18

绝对不要用on。在 JavaScript 中，事件也不以on. 只有事件处理程序会这样做。JS中没有onClick事件。事件名称是click，如果您为该函数分配函数，则在收到事件onClick时将调用此函数。click

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

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

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

[(name)]="someProp"

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

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

(nameChange)="onNameChange($event)"

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

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

(loggedIn)="onLoggedIn($event)
于 2016-10-08T08:30:50.860 回答