当它是嵌套元素的一部分时，如何将 html 内容分配给 ngbPopover 和 popoverTitle？

Question

我有一个使用 ngbPopover 和 popoverTitle 的嵌套组件。将显示的内容将通过 @Input() 属性给出。

问题： 如果给定的输入类似于 "<b>Some Title</b>"，我希望它是粗体而不是按字面显示。

我尝试按照文档 here 中的描述使用，但在我的情况下，无论我绑定什么都会有标记。我的标记不是预定义的。所以这没有帮助。

import { Component, Input } from "@angular/core";

@Component({
    selector: "help-popup",
    template: `<span 
      class="fa fa-question-circle-o btn-outline-info btn-sm"
      style="font-size: 18px" triggers="focus:blur"
      [placement]="placement"
      [ngbPopover]="helpText"
      container="body"
      [popoverTitle]="helpTitle"></span>`
})

export class HelpPopupComponent {
    @Input() placement: string = "top";
    @Input() helpText: string = "";
    @Input() helpTitle: string = "";
}

我想像这样使用它：

<help-popup helpTitle="<b>Bold Title</b>"
              helpText="<u>Underline text</u>"></help-popup>

Answer 1

ng-bootstrap Popover 组件在其内容中允许 HTML，但据我在 the documentation 中所见，在其标题中却没有：ngbPopover 属性可以是模板，popoverTitle 属性只是一个字符串。

This plunker, adapted from the ng-bootstrap documentation, shows how to display helpText as HTML content in the popover. In the popover template, the value of helpText is assigned directly to the innerHTML property of a div element to avoid the HTML escaping 插值会发生：

<ng-template #popContent><div [innerHTML]="helpText"></div></ng-template>

并且模板绑定到元素的ngbPopover 属性:

<button ... [popoverTitle]="helpTitle" [ngbPopover]="popContent">
  ...
</button>

当它是嵌套元素的一部分时，如何将 html 内容分配给 ngbPopover 和 popoverTitle？

How to assign html content to ngbPopover and popoverTitle when it is part of a nested element?

ng-bootstrap

angular