如何使用指令呈现 HTML 字符串

Question

我有一个用例，我需要将HTML节点呈现并转换为HTML字符串，然后在该HTML字符串中的特定元素上添加ngx-bootstrap工具提示指令。

我可以通过将 InnerHTML 与管道一起使用或创建一个单独的组件来使 HTML 呈现良好，但总是在呈现 HTML 后，元素上的工具提示指令没有注册，我不确定从哪里开始。我本来可以在 PIpe 上使用pure: false来解决它，但它没有。

这是我用管道尝试过的方法：

带工具提示的管道指令

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { BLOCKS, INLINES } from '@contentful/rich-text-types';
import { Store } from '@ngxs/store';
import { DeckState } from '../__states/deck';
@Pipe({ name: 'rich', pure: false })
export class RichContent implements PipeTransform {
  constructor(private sanitizer: DomSanitizer, private store: Store) {
  }
  transform(content) {

    let options = {
      renderNode: {
        [INLINES.EMBEDDED_ENTRY]: (node) => {
          return `<b [tooltip]="node.data.target.fields.companyName">${node.data.target.fields.companyName}</b>`
        }
      }
      }
      var html = documentToHtmlString(content, options);
      return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

该目录

<div [innerHTML]="content | rich"></div>

结果

没有工具提示指令工作或注册的纯 HTML。例如：

<p>Here is an example from <b [tooltip]="node.data.target.fields.companyName">Mixpanel</b></p>

希望有人可以帮助我，并为我指出解决这个问题的正确方向。

Answer 1

出于安全原因，您不能，您需要编写一个组件。

检查 Angular 2 内部 HTML(点击(绑定相同的问题，不同的情况。

安全
清理示例

Answer 2

我有一个类似的情况，我试图将ngStyle用于我使用innerHTML渲染的内容，我的发现(尽管我很高兴被证明是错误的(是不可能的，因为innerHTML内容没有被Angular插值。看这里。

在我的情况下，解决方案是在源(服务器端(而不是使用 Angular 添加必要的样式。

你能只使用标题 HTML 属性吗？看起来不像 Angular 那么好，但如果它只是你想要的工具提示，它可能会起作用吗？

虽然正如 rmjoia 所建议的那样，您最好将所需的数据拉入新组件中，然后根据需要添加样式、工具提示等。