我有一个使用 ngbPopover
的嵌套组件和 popoverTitle
.将显示的内容将通过@Input()
给出特性。
问题:
如果给定的输入类似于 "<b>Some Title</b>"
,我希望它是粗体而不是字面显示。
我尝试按照文档 here 中的说明使用,但就我而言,无论我绑定(bind)什么都会有标记。我的标记不是预定义的。所以这没有帮助。
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 documentation 中所见,不在其标题中:ngbPopover
属性可以是模板,popoverTitle
属性只是一个字符串。
This plunker ,改编自 ng-bootstrap 文档,展示了如何显示 helpText
作为弹出窗口中的 HTML 内容。在弹出框模板中,helpText
的值直接分配给 innerHTML
div 元素的属性以避免 HTML escaping插值会发生这种情况:
<ng-template #popContent><div [innerHTML]="helpText"></div></ng-template>
并且模板绑定(bind)到
ngbPopover
元素属性:<button ... [popoverTitle]="helpTitle" [ngbPopover]="popContent">
...
</button>
关于angular - 当它是嵌套元素的一部分时,如何将 html 内容分配给 ngbPopover 和 popoverTitle?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47944691/