각도 4로 @HostListener (클릭 리스너를 동적으로 생성)에서 문서를 클릭 한 다음 캡처

Question

나는 클릭 할 때 상태를 토글하는 지시문이 있습니다. 상태가 활성화되어 있고 사용자가 페이지의 다른 곳을 클릭하면 상태가 비활성화되어야합니다.

새로운 Renderer2 수신 기능을 사용하여 "다음 클릭"을 잡아내는 수신기를 동적으로 생성하려고 시도했습니다. 여기에서 문제는 청취자가 생성되는 즉시 콜백 기능이 실행된다는 것입니다. 한 번 클릭하면 활성화 된 다음 즉시 요소가 비활성화됩니다. 나는 왜 이런 일이 일어나고 있는지 그리고 내가 그 문제를 해결하기 위해해야 ​​할 일을 이해하는 데 도움을 찾고 있습니다.

지침 : 부모의 자녀에서

import { Directive, ElementRef, Input, Output, HostListener, EventEmitter, Renderer2 } from '@angular/core'; 

@Directive({ 
    selector: '[emClickToClose]' 
}) 
export class ClickToCloseDirective { 
    @Input('emClickToClose') 
    openCtrl: boolean; 

    @Output() 
    ctrlUpdate: EventEmitter<boolean> = new EventEmitter(); 

    @HostListener('click', ['$event']) onClick(e: MouseEvent) { 
    this.openCtrl = !this.openCtrl; 
    this.ctrlUpdate.emit(this.openCtrl); 
    if (this.openCtrl) { 
     const removeRegisteredListener = this.renderer.listen('document', 'click',() => { 
     console.log('the document was clicked', this.openCtrl); 
     this.openCtrl = false; 
     this.ctrlUpdate.emit(this.openCtrl); 
     removeRegisteredListener(); 
     }); 
    } 
    } 

    constructor(private el: ElementRef, private renderer: Renderer2) { 
    } 

} 

Answer 1

이벤트 거품까지, 이벤트가 계속 전달되는 동안 이벤트 리스너를 추가하기 때문에, 궁극적 인 부모가되는 문서가 사용자의 클릭 이벤트를 받게됩니다. 를 사용하여 이벤트 전파를 중지해야합니다. 클릭 핸들러에 e.stopPropagation();

Answer 2

당신은

<demo-component [emitStatus]="false"></demo-component> 

은 입력 변수를 가지고 emitStatus

이

import { Directive, HostListener, Renderer, ElementRef } from '@angular/core'; 
@Directive({ 
    selector: '[click]' 
}) 
export class ChangeDirective{ 

    constructor(
     private renderer: Renderer, 
     private el: ElementRef 
    ){} 

    @HostListener('click') onClick() { 
     let status = this.el.nativeElement.attributes['emitStatus']; 
     if(status){ 
      doo something 
     } 

    } 
} 

같은 지침을 만들기로 구성 요소를 선언

아래로이를 달성하기위한 지침과 구성 요소를 사용한다

선택기를 구성 요소에 추가하십시오.

<demo-component [emitStatus]="false" click></demo-component> 

Answer 3

퍼스트 오프하여 @HostListener('click', ...)에서 [emClickToClose] 속성에 적용되는 DOM 요소에 이벤트 리스너에 결합된다. 어떻게 사용하고 있는지 잘 모르겠지만, 닫으려는 요소를 클릭하고 싶은 요소와 같으면 @HostListener('document:click', ...)을 대신 사용하고 싶을 것입니다.

이벤트 핸들러가 바인딩되어 클릭을 포착하고 즉시 창을 닫고 자체를 제거하는 것입니다. 다음과 같이 지시문 요소 외부에서 클릭이 발생하는지 확인해야합니다.

'@ angular/core'의 {Directive, ElementRef, Input, Output, HostListener, EventEmitter, Renderer2}를 가져 오십시오.

@Directive({ 
    selector: '[emClickToClose]' 
}) 
export class ClickToCloseDirective { 
    @HostListener('document:click', ['$event']) documentClick(event) { 
    if (! this.el.nativeElement.contains(event.target) && this.open) { 
     this.openCtrl = false; 
     this.ctrlUpdate.emit(this.openCtrl); 
    } 
    } 

    constructor(private el: ElementRef, private renderer: Renderer2) { 
    } 
} 

또한, 단순히 함수 이름을 지정 "removeRegisteredListener는"실제로 이벤트 리스너를 제거하지 않습니다,하지만 지시어가 파괴 될 때 이벤트 리스너가 제거됩니다. 나는이 도움을 바랍니다.