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

  <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.
}

我认为它应该有效。

在Angular中切换下拉列表

2 个答案: