我想添加 nb-bootstrap 弹出框来选择来自数据库的文本部分。
我已经在其他地方成功地实现了 ng-popovers，在 .ts 文件的代码库中。在数据库的内容中这样做，第一个问题是 Angular 会剥离 ng-popover 所需的绑定。
通过创建一个 safehtml 管道，剥离代码的问题消失了。但是，绑定是非功能性的，并且带有我想要弹出的内容的 ng-template 元素被内联呈现。
在进行研究以解决这个问题时，我收集到这可能是绑定在我的内容显示之前被检查/注册 - 本质上这是预期的行为。
是否有一种标准方法可以在从数据库中提取的内容上实现 ng-popovers？ 项目很大，我需要避免使用骇人听闻的解决方案。我愿意使用 ng-popovers 以外的其他方法，这些方法更适合在数据库内的内容上实现。
【问题讨论】：
标签： angular database ng-bootstrap
我不知道你的数据，但想象一下我们有这样的文本
text="[=Lorem=] ipsum dolor sit amet, consectetur adipiscing elit, sed do [=eiusmod=]
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in [=voluptate=] velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est [=laborum.=]"
并在数组中定义了一系列popover，如
popover=[{text:"tooltip1",title:"title 1"},
{text:"tooltip2",title:"title 2"},
{text:"tooltip3",title:"title 3"},
{text:"tooltip4",title:"title 4"}]
这个想法是生成一个具有 text、word 和 popover 属性的对象数组
const part=this.text.split("[=");
let count:number=0
part.forEach((x,index)=>{
let f=x.indexOf("=]")
if (f>=0)
{
this.data.push({
text:part[index-1],
word:part[index].substr(0,f),
popover:this.popover[count]
})
part[index]=part[index].substr(f+2)
count++
}
})
this.data.push({
text:part[part.length-1]
})
}
然后，我们可以在 .html 中使用这些数据
<div class="container">
<div style="display:inline" *ngFor="let d of data">{{d.text}}
<button *ngIf="d.popover" type="button" class="btn btn-link"
[ngbPopover]="d.popover.text"
[popoverTitle]="d.popover.title">
{{d.word}}
</button>
</div>
</div>
你可以在stackblitz看到结果
更新如果我们的文本有html标签就会出现问题，因为“divs”破坏了html标签，对不起
【讨论】：