切換下拉在角

Question

場景：

當用戶點擊該鏈接，下拉顯示，並點擊比其他鏈接，下拉列表被隱藏。我完成了展示部分，但不知道從哪裏開始隱藏下拉菜單。

代碼：

login.component.html

<div class="actions login__block__actions"> 
    <div class="dropdown" [ngClass]="{'open':showOption}"> 
     <a href="#" data-toggle="dropdown" (click)="toggleOption($event)"><i class="zmdi zmdi-more-vert"></i></a> 
     <ul class="dropdown-menu pull-right"> 
     <li><a data-block="#l-register" href="">Create an account</a></li> 
     <li><a data-block="#l-forget-password" href="">Forgot password?</a></li> 
     </ul> 
    </div> 
    </div> 

login.component.ts

@HostListener('document:click', ['$event']) 
    toggleOption(event) { 
    console.log(this._eref.nativeElement.contains(event.target)); 
    if (this._eref.nativeElement.contains(event.target)) { 
     this.showOption = !this.showOption; 
    } else { 
     this.showOption = false; 
    } 
    } 

屏幕：

任何建議將有所幫助。謝謝。

Answer 1

您可以用ViewChild的幫助和ElementRef在

login.component.html做到這一點

<div class="actions login__block__actions"> 
    <div class="dropdown" [ngClass]="{'open':showOption}"> 
     <a href="#" data-toggle="dropdown" (click)="toggleOption()"><i #loginpopup class="zmdi zmdi-more-vert"></i></a> 
     <ul class="dropdown-menu pull-right" *ngIf="this.showOption"> 
     <li><a data-block="#l-register" href="">Create an account</a></li> 
     <li><a data-block="#l-forget-password" href="">Forgot password?</a></li> 
     </ul> 
    </div> 
    </div> 

在login.component.ts

@Component({ 
    // add selector, templateUrl, StyleUrl 
    host: { '(document:click)': 'handleClick($event)' }, 
}) 

export class LoginComponent { 

    @ViewChild('loginpopup') private loginpopup : ElementRef; 

    private handleClick(event) { 
     if (this.showOption) { 
      let clickedComponent = event.target; 
      if (clickedComponent !== this.loginpopup.nativeElement) { 
       this.showOption = false; 
      } 
     } 
    } 

    private toggleOption(){ 
     this.showOption = this.showOption === true ? false : true; 
    } 
} 

Answer 2

當你告訴下拉列表

<div class="actions login__block__actions"> 

    <div class="fullscreen-overlay" *ngIf="showOption" (click)="showOption = false;"></div> 

    <div class="dropdown" [ngClass]="{'open':showOption}"> 
    ... 
    </div> 
    </div> 


.fullscreen-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0, 0.0); 
    z-index: 5; // you need change the z-index and make this layer behind you dropdown list. 
} 

我認爲它應該作品可以顯示全屏覆蓋股利。