Ein- und Ausgänge, wie man mit ihnen arbeitet, um den Namenskonventionen des Styleguides von Angular 2 zu folgen?

Question

Bevor ich besser wusste, habe ich meine Richtlinie wie folgt definiert haben:

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

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

Aber dann las ich das Styleguide und es wird gesagt, dass Sie nicht Ihre Ausgaben mit on seit Angular 2 unterstützt die on- Syntax Präfix sollte in die Vorlagen.

So wie ich versuche, es zu etwas zu ändern:

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

aber ich finde es schwierig, die @Input Namen von dem Output Namen zu trennen, wenn Sie nicht berechtigt sind die on zu verwenden Präfix.

Bevor Sie beide die @Input und @Output das gleiche Ding nennen können, aber wenn beide innerhalb der exportierten Klasse deklarieren, dann funktioniert das nicht mehr, da ein Fehler geworfen wird.

Wenn ich die @Input-outside und die @Output-outsideClick nennen, ist es nicht wirklich Sinn machen, da sie beide die gleiche Sache sind. outside ist die Funktion, die ich beim Aufruf von outsideClick ausführen möchte.

Auch outsideClick wird nicht wissen, was zu tun ist, wenn outside nicht mehr die gleiche Sache ist, oder fehle ich etwas?

Wie sollte ich die Variablen @Input und @Output hier ansprechen, so dass es immer noch funktioniert und so viel Sinn macht wie im ersten Beispiel?

EDIT:

Anwendungsbeispiel:

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

Answer 1

Definitiv nicht on verwenden. In JavaScript-Ereignissen starten Sie auch nicht mit on. Nur die Ereignishandler tun es. Es gibt kein onClick Ereignis in JS. Der Ereignisname ist click und wenn Sie eine Funktion zu onClick zuweisen, wird diese Funktion aufgerufen, wenn das Ereignis click empfangen wurde.

Wenn Sie Ein- und Ausgänge haben, die zusammen ihnen gehören nennen

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

Dies ermöglicht die kurze Hand für Angular2 „Zwei-Wege-Bindung“

[(name)]="someProp" 

Wenn Sie @Input() und @Output() (bevorzugt Weg) dann brauchen Sie nicht inputs: [] und outputs: []. Dies sind zwei Möglichkeiten, das gleiche zu tun, und wenn Sie beide verwenden, ist es redundant.

der Browser Namensschema zu entsprechen, was man tun könnte

ist

(nameChange)="onNameChange($event)" 

ein Event-Handler aufgerufen werden onNameChange zu haben, wenn das nameChange Ereignis empfangen wird.

Wenn das Ereignis nicht Teil einer Eingabe/Ausgabe-Paar ist, können Sie oder die Change

(loggedIn)="onLoggedIn($event)