Question

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

我可以通过将InnerHTML与管道结合使用或创建单独的组件来使HTML呈现出更好的效果，但是总是在HTML呈现之后，元素上的tooltip指令未注册，并且我不确定该去哪里从这里。我本来可以在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);

  }
}

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

我遇到过类似的情况，我尝试将ngStyle与使用innerHTML渲染的内容一起使用，但我的发现（虽然我很高兴被证明是错误的）是不可能的，因为innerHTML内容不是由Angular插值。 See here。

在我的案例中，解决方案是在源（服务器端）而不是使用Angular添加必要的样式。

您可以只使用title HTML attribute吗？看起来不会像Angular一样好，但是如果您只是想使用的一种工具提示，它可能会奏效？

尽管rmjoia提出了建议，但最好将所需的数据提取到新组件中，然后根据需要添加样式，工具提示等。

Answer 2

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

检查Angular 2 innerHTML (click) binding相同的问题，但大小写不同。.

Security
Sanitization example

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

具有工具提示指令的管道

HTML

结果

2 个答案: