无法在引导弹出窗口组件的弹出内容中使用新行动态设置内容

Question

我正在尝试使用我自己的自定义字符串来利用引导程序的弹出组件，但其中包含一个新行。我已经对此进行了大量研究，并找到了使用"ng-template"标签获取新行的解决方案，但是当尝试传入带有中断符(br 或 (的字符串时，这不起作用。

我已经尝试了很多事情，使用innerHTML，dom中的字符串，空格的许多组合：pre-line，json管道。似乎什么都不起作用。我得到的最好的是[Object HtmlDivElement]，当在div而不是ng模板上使用innerHTML时。如前所述，正常工作的唯一方法是在ng模板中包含硬编码的html，然后在"ngbPopover"属性中引用该ng模板。这样做的问题是我没有硬编码的 HTML，而只有一个传入的字符串(带有 HTML 标签(。

<ng-template #popContent style="white-space: pre-line;">{{controlModel.tooltip}}</ng-template>
<div *ngIf="controlModel.tooltip" style="display:inline; white-space: pre-line;" [ngbPopover]="popContent"
popoverTitle="Tip" triggers="mouseenter:mouseleave"
placement="right"
container="body">
<i class="icon-info"></i>
</div>

预期结果是将字符串"controlModel.tooltip"中包含的新中断显示在弹出框内容中

Answer 1

通过将""的字符串拆分为字符串数组来解决它，执行以下操作：

<ng-template #popContent>
<ng-container *ngFor="let splitString of tooltipSplit">
{{splitString}}<br />
</ng-container>
</ng-template>