Question

我想让我的popover出现在另一个location。

是否使用ng-template将位置弹出位置在另一个位置？

<ng-template #popmeover>
    <button type="button" (click)='pop.hide()' class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    <p>
    I am a popoverat another location trying my best to popover!
    </p>
</ng-template> 
            
         <br><br>
         <br><br>
         <span  [popover]="popmeover" #pop="bs-popover" container="body" >you click me popover should appear there!</span>
         <br>
         <br>
  
         <span >Make popover appear here!</span>

Answer 1

您可以执行以下操作：

<ng-template #popmeover>
    <button type="button" (click)='pop4.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <p>
      I am a popoverat another location trying my best to popover!
    </p>
  </ng-template>

  <br>
  <br>
  <br>
  <br>
  <span (click)="pop4.show()">you click me popover should appear there!</span>
  <br>
  <br>

  <span [popover]="popmeover" #pop4="bs-popover" container="body">Make popover appear here!</span>

工作Plunkr

Answer 2

你可以像这样使用CSS：

  .popover {
  top: ###px !important;
  bottom: ###px !important;
  left: ###px !important;
  right: ###px !important; 
  }

然后将其作为弹出窗口的类

应用

Answer 3

我自己遇到了这个问题，建议的解决方案不是一个选择。 ngx-bootstrap popover的问题在于，它同时使用常规定位和对popover元素的变换来设置位置，因此您无法覆盖它。我通过将popover属性附加到一个空的跨度并在显示弹出窗口之前更改了跨度的位置来解决了这个问题，因此该弹出式窗口无论走到哪里都遵循该跨度的位置。

<span [popover]="myPopover"
    [outsideClick]="true" 
    (onHidden)="popoverIsOpen=false"
    triggers=""
    [adaptivePosition]="false"
    [isOpen]="popoverIsOpen"
    [style.top]="popoverPosition.y+'px'"
    [style.left]="popoverPosition.x+'px'"
    placement="right">
</span>

Ngx-bootstrap popover将出现在另一个位置

3 个答案: