Question

我已经使用div和ngbPopover创建了一个自定义选择。

我坚持如何设计我的选择div＆＃39;当弹出窗口打开时。当有人点击它时，我的选择div应该得到不同的边框颜色，因此所有选项的弹出框都是打开的。每当有人点击其他任何地方，因此弹出窗口关闭时，选择的边框颜色应该回到它的原始颜色。

我尝试过这样做：专注或：活跃，但这些似乎不起作用..

任何想法????

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

Answer 1

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

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

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

希望它会有所帮助

使用popover自定义选择，打开时更改颜色

1 个答案: