コンポーネントの外側で角2のマウスアップを取得する方法

Question

私はabcコンポーネント（ページの一部）を持っています。それはイベントmouseupを持っています。とき<div>の内部マウス

@Component({ 
    selector: 'abc-component' 
}) 
@View({ 
    <div (mousedown)="mouseDown()" (mouseup)="mouseUp()"></div> 
}) 
export class ScheduleComponent { 
    mouseDown(){ 
     //doSomthing 
    } 
    mouseUp(){} 
} 

しかし、mouseUpイベントにのみトリガすることができます。 <div>の外でもイベントをトリガーするにはどうすればよいですか？

私は(mouseup)="mouseUp()"にapp.tsを移動して、app.tsが知っているように@Outputまたはserviceのようなものを使用する必要がありますか？他の方法はありますか？

おかげ

Answer 1

グローバルイベントに耳を傾けること

<div (window:mousedown)="mouseDown()" (window:mouseup)="mouseUp()"></div> 

のような世界的なイベントターゲットを追加します。 （bodyとdocumentも同様です）。

これは、コンポーネント内のコンポーネントクラス

@HostListener('window:mouseup', ['$event']) 
mouseUp(event){} 

Answer 2

成分はwindowとdocumentオブジェクトを介してイベントにアクセスすることができます。だから、コンポーネントのコンストラクタでイベントリスナーを設定できます。

constructor() { 
    document.body.addEventListener("mouseup",() => { 
    this.mouseup(); 
    }); 
} 

Answer 3

にも、もちろん作品その次のように行うことが好ましい：あなたは上のイベントを削除する必要はありません

@HostListener('document:mouseup', ['$event']) 
onMouseUp(event: MouseEvent) { 
    ... 
} 

このようにngDestroy