입력 및 출력, Angular 2의 스타일 가이드의 명명 규칙을 따르는 방법은 무엇입니까? 나는 더 나은 알기 전에

Question

는 내 지시어는 다음과 같이 정의하는 데 사용 : 다음

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

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

하지만이 스타일 가이드를 읽고 당신이 코너 2 이후 on로 출력을 접두사 안된다고 말했다 on- 구문을 지원합니다 템플릿. 당신이 on 사용하도록 허용하지 않을 경우, 나는 그것이 어려운 Output 이름에서 @Input 이름을 분리하기 위해 찾는거야 그러나

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

:

그래서 내가 좋아하는 뭔가를 변경하려고 해요 접두사.

@Input과 @Output을 모두 같은 이름으로 지정하기 전에 내 보낸 클래스에서 둘 다 선언하면 오류가 발생하므로 더 이상 작동하지 않습니다.

@Input을 outside으로, @Output을 outsideClick으로 지정하면 두 가지가 모두 동일하므로 실제로 이해가되지 않습니다. outside은 outsideClick을 호출 할 때 실행하려는 함수입니다.

outsideClickoutside이 더 이상 같은 이름이 아니거나 무엇인가 누락 된 경우 실행할 내용을 알지 못합니다.

여기서 @Input 및 @Output 변수의 이름을 사용하여 여전히 작동하고 첫 번째 예제에서와 같이 이해해야하는 방법은 무엇입니까?

편집 :

사용 예 :

이

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

Answer 1

확실히 on를 사용하지 마십시오. JavaScript 이벤트에서도 on으로 시작하지 마십시오. 이벤트 처리기 만 수행합니다. JS에는 onClick 이벤트가 없습니다. 이벤트 이름은 click이고 onClick에 함수를 할당하면 click 이벤트가 수신 될 때이 함수가 호출됩니다.

당신이 함께 속해 입력과 출력이 그들에게

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

이름이있는 경우이를 @Input() 및 @Output()는 (선호 사용하는 경우 Angular2에 대한 짧은 손

[(name)]="someProp" 

"양방향 바인딩"할 수 있습니다 그런 다음 inputs: [] 및 outputs: []이 필요하지 않습니다. 이것들은 같은 일을하는 두 가지 방법이고, 둘 다 사용하면 중복됩니다.

당신이 무엇을 할 수 있는지 브라우저 명명 체계가

(nameChange)="onNameChange($event)" 

가 nameChange 이벤트가 수신 될 때 이벤트 핸들러 onNameChange가 호출 될 것입니다 일치합니다.

이벤트가 당신이 또는 Change

(loggedIn)="onLoggedIn($event)