当ngbPopover和popoverTitle是嵌套元素的一部分时，如何将html内容分配给ngbPopover和popoverTitle? [英] How to assign html content to ngbPopover and popoverTitle when it is part of a nested element?

问题描述

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

I have a nested component that uses ngbPopover and popoverTitle. The content that will be displayed will be given through @Input() properties.

问题:如果给定的输入就像< b> Some Title</b>" ，我希望将其设为粗体，而不是按字面意思显示.

The problem: If the given input is like "<b>Some Title</b>", I would like to have that be bold rather than displayed literally.

我尝试按照文档此处中所述进行使用，但是就我而言，无论我绑定什么，都将具有标记.我的标记不是预定义的.所以那没有帮助.

I tried using as described in the docs here, but in my case, whatever I bind will have the markup. My markup isn't predefined. So that didn't help.

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>

推荐答案

ng-bootstrap Popover组件允许在其内容中使用HTML，但是据我在

The ng-bootstrap Popover component allows HTML in its content but, as far as I can see in the documentation, not in its title: the ngbPopover property can be a template, the popoverTitle property is just a string.

此矮子 ，从ng-引导程序文档，显示了如何在弹出窗口中将 helpText 显示为HTML内容.在弹出模板中，将 helpText 的值直接分配给div元素的 innerHTML 属性，以避免

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 that would occur with interpolation:

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

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

and the template is bound to the ngbPopover property of the element:

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

这篇关于当ngbPopover和popoverTitle是嵌套元素的一部分时，如何将html内容分配给ngbPopover和popoverTitle?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！