Question

html组件

 <div class="select-wrapper select">
      <input (click)="manageOptionsView()" type="text" class="select-dropdown" data-activates="select-options-524f0174-3e9b-445a-8bf3-e304572eb476" value="Choose your option">
      <ul [ngStyle]="clickedSelect == true ? {'display':'block'} : {'display':'none'}" id="select-options-524f0174-3e9b-445a-8bf3-e304572eb476" class="dropdown-content select-dropdown">
      <li class="disabled"><span class="filtrable">Choose your option</span></li>
      <li class="" *ngFor="let option of options" (click)="changeValue(option); manageOptionsView();"><span class="filtrable">{{option}}</span></li>
      </ul>
    </div>

ts组件

import { Component, OnInit, ElementRef, HostListener, Input, Output } from '@angular/core';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss'],
})
export class SelectComponent implements OnInit {
  clickedSelect: boolean = false;
  clickedOutside: boolean = false;
  @Input() options: any[];
  @Output() selectedOption: any = null;
  constructor(private _eref: ElementRef) { }

  ngOnInit() {
  }

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if (this._eref.nativeElement.contains(event.target)) {
      this.clickedSelect = true;
    } else {
      this.clickedSelect = false;
    }
  }

  manageOptionsView() {
    this.clickedSelect = !this.clickedSelect;
  }

  changeValue(value) {
    this.selectedOption = value;
  }


}

如您所见，当我单击输入时，在元素ul元素隐藏之外（从块更改为无）时，ul的显示从无更改为块。好的，这些功能可以正常工作，但是当单击li元素ul并不会更改显示时，为什么？

Answer 1

它应该隐藏吗？如果是这样，那么您可以像在manageOptionsView()中一样做同样的事情。设置clickedSelect属性。

Answer 2

它只是一个简单的解决方法

将您的changeValue()更改为以下代码

changeValue(value) {
    event.stopPropagation();
    this.clickedSelect = !this.clickedSelect;
    this.selectedOption = value;
  }

Check out the stackblitz snippet

如何在li级隐藏父级ul？

2 个答案: