无法隐藏弹出箭头

Question

我正在构建一个 Angular 组件

我正在尝试隐藏 bootstrap 弹出框的箭头 CSS 但没有用。

Html:

    <button type="button" class="btn btn-link" placement="bottom-right"
      [ngbPopover]="popContent">
      <fa-icon class="text-white" [icon]="['fas', 'user']" size="lg"></fa-icon>
    </button>

     <ng-template #popContent>Hello!</ng-template>

CSS:

.popover .arrow {
    display: none !important;
}

但是如果我从 inspector 应用 CSS，它会起作用

我正在使用：https://ng-bootstrap.github.io/

Answer 1

您将需要使用伪css selector 来实现此目的，

:host::ng-deep ngb-popover-window::ng-deep .arrow{
   display: none !important;
}

让我们分解一下，

当你点击button时，它会在dom中生成ngb-popover-window个组件。

因此，从 :host select ngb-popover-window 和 ngb-popover-window select .arrow 并设置样式。

:host -> ngb-popover-window -> .arrow,

to select element from component 不影响全局样式，需要用ng-deep as css selector.

无法隐藏弹出箭头

Cant hide popover arrow

angular-bootstrap

bootstrap-4

angular