输入和输出，如何与它们一起使用以遵循Angular 2样式指南的命名约定? [英] Input and outputs, how to work with them to follow the naming convention of the Angular 2's styleguide?

问题描述

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

  ...输入:[在外面"]...导出类ClickOutsideDirective {@Output()onOutside:EventEmitter< any>=新的EventEmitter();} 

但是随后我阅读了样式指南，它说您不应在 on 上加上输出前缀，因为Angular 2在模板中支持 on-语法.

所以我正在尝试将其更改为:

  @Input()outsideClick:任意；@Output()outsideClick:EventEmitter< any>=新的EventEmitter(); 

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

在将 @Input 和 @Output 都命名为相同名称之前，但是如果在导出的类中声明两者，则该名称将不再起作用，因为将引发错误.

如果我将 @Input 命名为 outside ，将 @Output 命名为 outsideClick ，则不会确实是有道理的，因为他们都是同一个人. outside 是我在调用 outsideClick 时要执行的功能.

此外，如果 outside 不再具有相同的名称，或者我丢失了某些内容， outsideClick 将不知道执行什么操作?

我应该如何在这里命名 @Input 和 @Output 变量，以使其仍然有效，并且与第一个示例一样有意义?

用法示例:

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

解决方案

绝对不要在 on 上使用.在JavaScript事件中，也不要以 on 开头.只有事件处理程序可以.JS中没有 onClick 事件.事件名称为 click ，如果您为 onClick 分配了一个函数，则在收到 click 事件时将调用此函数.

如果输入和输出属于同一名称，则将它们命名

  @Input()名称:任意；@Output()nameChange:EventEmitter< any>= new EventEmitter();; 

这为Angular2双向绑定"提供了捷径

  [(name)] ="someProp" 

如果使用 @Input()和 @Output()(首选方式)，则不需要输入:[] 和 outputs:[] .这是做同一件事的两种方式，如果您同时使用这两种方式，则是多余的.

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

 (nameChange)="onNameChange($ event)" 

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

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

 (loggedIn)="onLoggedIn($ event) 

Before I knew any better I used to have my directive defined like this:

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

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

But then I read the styleguide and it said that you should not prefix your outputs with on since Angular 2 supports the on- syntax in the templates.

So I'm trying to change it to something like:

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

However, I'm finding it difficult to separate the @Input name from the Output name if you aren't allowed to use the on prefix.

Before you could name both the @Input and @Output the same thing but if declaring both within the exported class then this no longer works since an error will be thrown.

If I name the @Input to outside and the @Output to outsideClick, it doesn't really make sense since both of them are the same thing. outside is the function I want to execute when calling outsideClick.

Also, outsideClick won't know what to execute if outside isn't name the same thing anymore, or am I missing something?

How should I approach naming the @Input and @Output variables here so that it still works and makes as much sense as it did in the first example?

EDIT:

Usage example:

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

解决方案

Definitely don't use on. In JavaScript events also don't start with on. Only the event handlers do. There is no onClick event in JS. The event name is click and if you assign a function to onClick this function will be called when the click event was received.

If you have inputs and outputs that belong together name them

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

This allows the short hand for Angular2 "two-way binding"

[(name)]="someProp"

If you use @Input() and @Output() (preferred way) then you don't need inputs: [] and outputs: []. These are two ways to do the same thing and if you use both one is redundant.

To match the browser naming scheme what you could do is

(nameChange)="onNameChange($event)"

to have an event handler onNameChange to be called when the nameChange event is received.

When the event is not part of an input/output pair you can or should omit the Change

(loggedIn)="onLoggedIn($event)

这篇关于输入和输出，如何与它们一起使用以遵循Angular 2样式指南的命名约定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！