ngx Bootstrap手动关闭按钮

Question

我试图使用ngx-bootstrap在弹出窗口的右上角创建一个手动弹出关闭按钮。我知道要添加x按钮，我们必须使用bootstrap中的＆amp; Times。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

This是我正在使用的链接。我使用这个例子，模板和组件。

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

Answer 1

管理最终执行it，因为popoverTitle只接受字符串

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

从popover dynamic html文档中，您可以看到[popover]接受html输入。您可以使用ID为ng-template的{​​{1}}创建具有相应风格的所需自定义弹出式内容，并将ID作为输入提供给eg: #popOverContent，如下所示。

[popover]

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

<强>更新

您已经在plnkr演示中获得了最佳解决方案。 <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> 可以使用CSS样式放置在任何位置。

X

弹出内容......没有标题