带有弹出框的自定义选择，打开时更改颜色答案

【问题标题】：custom select with popover, change color when open带有弹出框的自定义选择，打开时更改颜色
【发布时间】：2018-06-14 01:40:27
【问题描述】：

我创建了一个带有 div 和 ngbPopover 的自定义选择。

我坚持在弹出框打开时如何设置“选择 div”的样式。当有人单击它时，我的选择 div 应该获得不同的边框颜色，因此带有所有选项的弹出框已打开。每当有人点击其他任何地方并因此弹出框关闭选择的边框颜色时，都应该恢复到原来的颜色。

我尝试过使用 :focus 或 :active 来执行此操作，但这些似乎不起作用..

有什么想法吗？？？？

HTML：

<div [ngbPopover]="Category" triggers="click:click" placement="bottom-left" #q="ngbPopover" class="select" (document:click)="q.close()" (click)="$event.stopPropagation()">
  {{ selectedCategory || 'All'}}
  <ng-template #Category class="options">
      <div *ngFor="let category of categories" (click)="selectedCategory = category.value" class="option" [ngClass]="{selected: category.value === selectedCategory}">
          {{ category.value }}
      </div>
  </ng-template>
</div>
<span class="caret"></span>

CSS：

.select {
    display: inline-block;
    border: 1px solid #e5e5e5;
    color: #272727;
    font-weight: 400;
    font-size: 1.4rem;
    width: 95%;
    cursor: pointer;
    padding: 0.6rem 1.2rem;
}

.select:active {
    border: 1px solid yellow;
}

.options {
    width: 100%;
}

.option {
    width: 100%;
    padding: 0.5rem 2rem;
    cursor: pointer;
    color: #333;
    font-size: 1.4rem;
    font-family: Montserrat, sans-serif;
}

.option:hover {
    background-color: #f5f5f5;
}

.caret {
    margin-left: -2.5rem;
}

.selected,
.selected:hover {
    background-color: #4c59a8;
    color: #fff;
}

:host>>>ngb-popover-window {
    padding: 0;
    color: #adadad;
    width: calc(95% - 3rem);
    max-width: 100%;
    max-height: 24rem;
    overflow-y: scroll;
    display: block;
    border-radius: 0;
    position: absolute;
}

:host>>>ngb-popover-window>.popover-header {
    display: none;
}

【问题讨论】：

标签： css angular twitter-bootstrap select popover

【解决方案1】：

您可以使用@HostListener 来完成您的任务。 @HostListener 监听事件。

import { HostListener } from '@angular/core'
.
.
.
class YourComponent {
  constructor() {
  }

  @HostListener('document:click') onDodumentClick(event: MouseEvent) { 
    // do your task here 
  }
}

希望对你有帮助

【讨论】：

我最终使用一个按钮来替换外部 div 而不是您的解决方案。您的解决方案可能奏效了，但我突然想到了这个按钮，结果证明它很容易完成我需要它做的事情。