각도 2로 이벤트 듣기

Question

나는 이것이 정말로 쉬워야한다고 느낀다. 그러나 나는 그것을 작동시킬 수 없다. 나는 브라우저를 전체 화면으로 만들기 위해 사용하고있는 테마에 포함되어있는 screenfull을 사용하고 있습니다. fullscreenchange 이벤트에 연결하여 전체 화면 모드에서 작업을 수행하려고합니다. 문서는 명확하게이 일을 위해 다음의 예를 상태 :

document.addEventListener(screenfull.raw.fullscreenchange,() => { 
 
    console.log('Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
 
});

내 구성 요소에 넣고 경우 예상대로이 콘솔에 출력 ngOnInit 방법.

@HostListener('screenfull.raw.fullscreenchange') 
 
onFullScreenToggle() { 
 
    console.log('Angular - Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
 
};

을하지만, 아무리 내가 무엇을하려고 :하지만이 그래서 다음과 같이 @HostListener 데코레이터를 사용하여 구현하기 위해 노력했다 각도에서이 상황을 처리 할 수있는 올바른 방법이 아니다 알고 이벤트를 선택하지 않습니다. 나는 정말로 내가 정말로 명백한 무엇인가 놓쳤다는 것을 정말로 기대하고있다. 그리고 누군가 그것을 지적 할 수 있으면 나는 많이 인정 될 것이다. 당신은 당신이 document: 또는 중 하나를 사용하여 이벤트를 접두사하는 데 필요한 document 또는 window에서 이벤트를 구독하려면 HostListener 자동하지만 HostListener와 일반적으로 다른 라이브러리의 사용자 정의 이벤트에 데리러 경우

Answer 1

는 document: (또는 window: 필요한 경우), 먼저 접두사 말했다하지만 당신은 사용할 때주의 사항 :

document.addEventListener(screenfull.raw.fullscreenchange,() => { ... }); 

당신이 addEventListener에 첫 번째 문자열 인수로 screenfull.raw.fullscreenchange을 보내, 그래서 나는 screenfull.raw.fullscreenchange 같은데요 이벤트 이름을 나타내는 문자열입니다, 그래서 작동 할 수 있습니다 다음과 같이를 추가 상상하는 것 :

@HostListener('document:' + screenfull.raw.fullscreenchange) 
onFullScreenToggle() { 
    console.log('Angular - Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
} 

Answer 2

@HostListener('document:screenfull.raw.fullscreenchange') 
onFullScreenToggle() { 
    console.log('Angular - Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
}; 

잘 모르겠어요 window:.

그래도 작동하지 않으면 onInit 접근 방식을 사용하거나 Observable.fromEvent를 통해 이벤트 노출을 고려해야 할 수 있습니다. 제시처럼