通过在打字稿中单击外部来关闭下拉菜单

Question

  

通过在打字稿中单击外部来关闭下拉菜单-当我单击窗口时它必须关闭，当我单击下拉列表时它会关闭，而当我单击外部它不关闭时它会关​​闭，这是因为我不使用jquery和bootstrap而正在做在角度6中，有人可以帮助我解决这个问题吗？

     .drop a { 
  display: block;  
} 
.open {display: none;} 




<li class="nav-item drop" id="dropdown">
          <a class="nav-link selected "(click)="noti();open_menu()">
              Notifications    <div class="pulse" style="cursor:pointer" *ngIf="notificationValue1.length > 0 "></div>
                <div class="marker" style="cursor:pointer" *ngIf="notificationValue1.length > 0 "><span class="np" >{{notificationValue1.length}}</span></div>

              <div style="cursor:pointer" *ngIf="notificationValue1.length ==0"><span class="np" ></span></div>
            </a>


            <div class="dropdown-content open" id="drop-menu">            
                  <div class="head text-black bg-light">
                      <div class="row">
                        <div class="col-lg-12 col-md-12 ">                          
                          <a (click)="markAll()"class="float-right text-black"style="cursor:pointer">Mark all as read</a>
                        </div>
                    </div>
                    <div class="notification-box">
                      <div class="row" *ngFor="let notification of notifications">

                        <div class="col-lg-8 col-sm-8 col-8">

                          <div (click)="updateNotify(notification['_id']['$oid']);"  style="cursor:pointer" >
                              <span class="texhite"  [style.color]="notification['is_read'] == 1 ? '#fb8f19':'#000'">{{notification.notification}}</span>
                          </div>

                        </div>    
                      </div>
                    </div>


                   <div class="footer bg-dark text-center">
                      <a href="" class="text-light">View All</a>
                    </div>
                  </div>           
          </div>

        </li> 

打字稿：

  open_menu(){ 

var clicked= document.getElementById('drop-menu'); 

if(clicked.style.display=='block') 
{ 
    clicked.style.display='none'; 
} 
else{ 
    clicked.style.display='block'; 
} 

}

   window.onclick = () => {
var clicked= document.getElementById('drop-menu'); 

if(clicked.style.display == 'block') 
{ 
    clicked.style.display='none'; 
} 


};