1.html：

<div class="memu-wrap">
  <div class="memu-item" (click)="showSearchList()" (mouseenter)="enterSearch()" (mouseleave)="hideSearchList($event)">
    {{activeItem?.areaName}}</div>
  <div class="search-container" [class.active]="isShowList" (mouseenter)="showSearchList()"
    (mouseleave)
 
="hideSearchList($event)">
    <ul class="search-content">
      <li *ngFor="let item of list">
        <span class="name" (click)="selectorChange(item)">{{item.areaName}}</span>
      </li>
    </ul>
  </div>
</div>

2.scss:

 1 .memu-wrap {
 2   position
 
: absolute;
 3   //right: 0;
 4   max-width: 13rem;
 5   width: 100%;
 6   height: 2rem;
 7   line-height: 2rem;
 8   z-index: 999;
 9 }
10 
11 .memu-item {
12   background: url('./../../../../assets/images/common/select_bg.png') no-repeat left center;
13   background-size: 100%;
14 
15   padding-left: 1rem;
16   cursor
 
: pointer;
17   color: #fff;
18 }
19 
20 .search-container {
21   overflow: hidden;
22   height: 0;
23 }
24 
25 .search-container.active {
26   z-index: 0;
27   height: auto;
28   max-height: 14rem;
29   overflow-y: auto;
30 }
31 
32 .search-container.active .search-content {
33   top: 0;
34 }
35 
36 .search-container .search-title-wrap .title {
37   width: 49%;
38   display: inline-block;
39   text-align: center;
40   background-color: rgba(89, 125, 202, 1);
41   box-sizing: border-box;
42   border: 1px solid rgba(0, 202, 171, 1);
43   margin-top: 0.3rem;
44 }
45 
46 .search-container .search-title-wrap .title.mr2p {
47   margin-right: 2%;
48 }
49 
50 .search-container .search-content {
51   position: relative;
52   top: -20rem;
53   transition: top .3s;
54   // margin: 0 0.5rem;
55   margin-left: 0.5rem;
56   background-color: rgba(0, 0, 0, 0.3);
57   // -webkit-box-shadow: 0px 0px 10px rgba(50, 119, 163, 1);
58   // box-shadow: 0px 0px 10px rgba(50, 119, 163, 1);
59   font-size: 1rem;
60 }
61 
62 .search-content li {
63   padding: .3rem .5rem 0;
64 
65   span {
66     color: #fff;
67     cursor: pointer;
68     display: block;
69   }
70 
71   span:hover {
72     text-shadow: 0 0 2px #fff;
73   }
74 
75   &.active {
76     span {
77       text-shadow: 0 0 .2px #fff;
78     }
79   }
80 }
81 
82 .search-content li:last-child {
83   padding-bottom: .3rem;
84 }
85 
86 .map-wrap {
87   width: 100%;
88   height: 100%;
89   z-index: 1;
90 }

3.ts:

import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.scss']
})
export class SelectorComponent implements OnInit, OnChanges {

  @Input() list;
  @Input() activeId;
  @Output() changeEv = new EventEmitter();

  isShowList:boolean = false;
  enterFlag:boolean = false;
  activeItem;

  constructor() {
  }

  ngOnInit() {

  }

  ngOnChanges() {
    if (this.list) {
      if (this.activeId) {
        this.activeItem = this.list.find(item => item['areaId'] == this.activeId);
      } else {
        this.activeItem = this.list ? this.list[0] : {};
      }
    }
  }

  enterSearch() {
    this.enterFlag = true;
  }

  showSearchList(): void {
    this.enterFlag = true;
    if (!this.isShowList) {
      this.isShowList = true;
    }
  }

  hideSearchList(event): void {
    if (!!event.relatedTarget) {
      this.enterFlag = false;
      setTimeout(() => {
        if (!this.enterFlag) {
          this.isShowList = false;
        }
      }, 0);
    }
  }

  selectorChange(item) {
    this.isShowList = false;
    this.activeItem = item;
    this.changeEv.emit(item);
  }
}