Как отобразить строку HTML с помощью директивы - PullRequest
Новая
       30

Как отобразить строку HTML с помощью директивы

1 голос
/ 15 апреля 2019

У меня есть случай, когда мне нужно визуализировать и преобразовать узел HTML в строку HTML, а затем добавить директиву подсказки ngx-bootstrap для определенного элемента в этой строке HTML.

Я могу заставить HTML отображаться нормально, либо используя InnerHTML с конвейером, либо создав отдельный компонент, но всегда после того, как HTML отображается, директива подсказки для элемента не регистрируется, и я не уверен, куда идти отсюда. Я хотел бы, хотя использование pure: false на PIpe решило бы это, но это не так.

Вот что я пробовал с трубкой:

Директива «Труба с подсказкой» 

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>

Надеюсь, что кто-то может помочь мне и указать мне правильное направление, чтобы решить эту проблему.

Ответы [ 2 ]

1 голос
/ 15 апреля 2019

Вы не можете по соображениям безопасности, вам нужно написать компонент.

Проверка Угловая 2 привязка innerHTML (щелчок) та же проблема, но в другом случае ..

Безопасность
Пример очистки

1 голос
/ 15 апреля 2019

У меня была похожая ситуация, когда я пытался использовать ngStyle с контентом, который я визуализировал с использованием innerHTML, и мой вывод (хотя я, к счастью, ошибался) был в том, что это было невозможно, потому что контент innerHTML неинтерполируется по Angular. См. Здесь .

Решение в моем случае состояло в том, чтобы добавить необходимый стиль в источнике (на стороне сервера), а не в Angular.

Не могли бы вы просто использовать атрибут title HTML ?Не будет выглядеть так же хорошо, как Angular, но если вам нужна только всплывающая подсказка, она может сработать?

Хотя, как подсказывает rmjoia , вам лучше потянуть занеобходимые данные в новый компонент, а затем добавьте стилизацию, всплывающие подсказки и т. д. при необходимости.

...