Ngx-Bootstrap 弹出窗口未设置正确的高度或宽度

Question

我正在尝试在我的 Ionic 2 / Angular 2 应用程序中使用ngx-bootstrap，但由于某种原因，弹出窗口在我的视图中无法正确显示：

<button
  placement="right"
  [outsideClick]="true"
  popover="this is a teseofnwifo ef efo efoih wefohwefo wef  h ioef  whefhweofihwoeht"
  [isOpen]="true"
  triggers="click"

  ion-button full outline 
  class="flex-col rounded box-shadow" 
  color="primary" 
  style="height:100%;font-size:16px;border-width:1px;" 
  (click)="goTo('new-client')" #1>
  <i class="fa fa-user-plus text-shadow" padding style="font-size: 150px;color:red;"></i>
  <span style="font-size:32px;text-transform:none;">New Client</span>
</button>

我不认为我的按钮样式应该影响弹出窗口，因为它呈现为单独的组件，但是当显示弹出窗口时，它的width和 都height设置为 4px。我不确定它是在哪里设置的，或者我是否在某个地方缺少一些 javascript 。

应用程序模块.ts

import { PopoverModule } from 'ngx-bootstrap/popover';

@NgModule({
  declarations: [...],
  imports: [
    PopoverModule.forRoot()
  ]
  ...
})

Answer 1

我正在使用 Angular 9。我唯一的方法是使用 ng-deep 强制全局更改它

::ng-deep popover-container {
    max-width: 100% !important;
    background-color: black !important;
    color: white !important;
}

::ng-deep .bs-popover-bottom>.arrow::after {
    border-bottom-color: black !important;
}