Question

我正在构建Angular组件

我正试图隐藏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;
}

但是，如果我应用检查器中的CSS，它将起作用

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

Answer 1

您将需要使用pseude-css选择器来实现这一目标，

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

让我们分解一下，

当您点击button时，它将在dom中生成ngb-popover-window分量。

因此，从:host中选择ngb-popover-window，然后从ngb-popover-window中选择.arrow并设置样式。

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

要在不影响全局样式的情况下从组件中选择元素，您需要使用ng-deep作为CSS选择器。

不能隐藏弹出箭头

1 个答案: