ngx Bootstrap 手动关闭按钮

Question

我正在尝试使用 ngx-bootstrap 在弹出框的右上角制作一个手动弹出框关闭按钮。我知道要添加 x 按钮，我们必须使用来自 bootstrap.

的 &Times

https://v4-alpha.getbootstrap.com/utilities/close-icon/

但是我不知道如何将它实现到我的标题中，因为我试图将它添加到右上角。

 content: string = "content of popover ";
 Title: string = "Title of popover";

 <a [popover]="content" container="body" placement="top" [popoverTitle]="Title" >Making this popover</a>

This 是我正在使用的 link。我正在使用此示例、模板和组件。

我的plunker基本上，简单来说，我需要在标题的右上角打一个X。

Answer 1

从 popover dynamic html 文档中您可以看到 [popover] 接受 html 输入。您可以使用带有 id eg: #popOverContent 的 ng-template 创建具有适当样式的所需自定义弹出内容，并将 id 作为输入提供给 [popover]，如下所示。

 <a [popover]= "popOverContent" container="body" placement="right">
   this popover need a x on top
 </a>

 <ng-template #popOverContent>
   <span style="float:right">X</span>
   <p>Popped content.....</p>
 </ng-template>

您可以在代码中替换这些行以进行更改

更新：

您已经在 plnkr 演示中获得了最佳解决方案。 X 可以使用 CSS 样式放置在任何地方。

<a [popover]="popOverContent" container="body" #pop="bs-popover" 
  placement="right">this popover need a x on top
</a>

<ng-template #popOverContent>
  <button type="button" (click)='pop.hide()' class="close" aria-
  label="Close">
  <span aria-hidden="true">&times;</span>
</button>

弹出内容..没有标题

Answer 2

最终设法完成 it，因为 popoverTitle 只接受字符串

<div>
  <ng-template #popoverContent3>
    <div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
      <p>this is a title...
      <button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
      </p>
    </div>
    <div>
     <p>The best looking pop over, with a TITLE!</p>  
    </div>
  </ng-template>
  
  <a  [popover]="popoverContent3" #pop2="bs-popover" placement="right">
   Pop over with title and a x button!
    </a>
</div>

ngx Bootstrap 手动关闭按钮

ngx Bootstrap manual close button

frontend

ngx-bootstrap

angular