angular4で外側をクリックするとドロップダウンメニューが表示されます

Question

ディレクティブを使用せずに外側をクリックするだけでドロップダウンを閉じます。私はそれを行う方法が混乱しています。私を助けてください。この私の通知コンポーネントここ

はここnotification.html

<a class="cursor-pointer" matTooltip="Notifications" 
    target="_blank" (click)="shownotification()"> 

<i class="fa-bell fa" ></i> 
</a> 

<div class="notification-container" *ngIf = "notification"> 
    <div class="up-arrow"></div> 
    <div class="header"> 
     <h4 style="padding-right:40px;">Notification</h4> 
     <h4 style="padding-left:90px;padding-right:0px;"><span>3</span></h4> 

    </div> 

    <div class="all-notifications"> 
    <div class="notifications"> 
    <span><i class="fa fa-check-circle" aria-hidden="true" style="color:green;"></i></span> &nbsp;<span class="f_clr">Lorem Ipsum Dollar</span> <span class="f_clr right_text"><span>2</span></span> 
    </div> 

    <div class="notifications"> 
     <span><i class="fa fa-clock-o" aria-hidden="true" style="color:rgb(37, 125, 226);"></i></span> &nbsp;<span class="f_clr">Lorem Ipsum Dollar</span> <span class="f_clr right_text"><span>2</span></span> 
    </div> 

    <div class="notifications"> 
     <span><i class="fa fa-cog" aria-hidden="true" style="color:rgb(196, 73, 24);"></i></span> &nbsp;<span class="f_clr">Lorem Ipsum Dollar</span> <span class="f_clr right_text"><span>2</span></span> 
     </div> 

    </div> 

の私のコードは私のnotification.component.ts

notification: boolean = false; 

    constructor() { } 

    ngOnInit() { 
    } 
    shownotification() { 
    this.notification = !this.notification; 
    console.log(this.notification); 
    } 

Answer 1

@HostListener('document:click', ['$event', '$event.target']) 
public onClick(event: MouseEvent, targetElement: HTMLElement): void { 
    if (!targetElement) { 
     return; 
    } 

    const clickedInside = this._elementRef.nativeElement.contains(targetElement); 
    if (!clickedInside) { 
     this.closeDropDown() 
    } 
} 

かのいずれかの実装を使用ですこのようなクリックアウトの指示： https://www.npmjs.com/package/angular2-click-outside

https://www.npmjs.com/package/ng2-click-outside