Angular domSanitizer bySecurityTrust Html вне объекта - PullRequest
Новая
       7

Angular domSanitizer bySecurityTrust Html вне объекта

0 голосов
/ 14 января 2020

Я пытаюсь заставить MathJax и Angular работать вместе. Я использую ngx-mathjax в качестве интеграции MathJax в Angular. Пока это мой код: 

<div mathjax>
  {{ field | keepHtml }}
</div>

field содержит смесь html (для форматирования) и MathJax-формул, например, <b>This</b> is an example <b>equation</b>: \( 2x+3=2 \). keepHtml - это пользовательский канал, который использует DomSanitizer, чтобы обойти санитарную обработку html: 

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Pipe({
  name: 'keepHtml',
  pure: false
})
export class KeepHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

Я хочу вставить отформатированный html вместе с отрисованными уравнениями MathJax. Но я могу запустить только одну вещь: 

<div mathjax [innerHtml]="field | keepHtml">
</div>

... работает только один раз, как только обновляется field, MathJax больше не обновляет уравнение. Когда я делаю 

<div mathjax>
  {{ field }}
</div>

, html очищается, и поэтому html-теги печатаются как текст. Хотя MathJax-уравнения отображаются и корректно обновляются. Использование keepHtml -Pipe вне innerHtml, как в первом фрагменте кода, приводит к ошибке SafeValue must use [property]=binding.... Как мне заставить все работать вместе?

Редактировать

Это мой MathJax-Config: 

MathJaxModule.forRoot({
      version: '2.7.5',
      config: 'TeX-AMS_HTML',
      hostname: 'cdnjs.cloudflare.com'
}),

1 Ответ

0 голосов
/ 14 января 2020

Если ваше внутреннее Html обновление вы можете использовать MathJaxTypeset() для обновления представления: 

<div mathjax #math>
  {{ field | keepHtml }}
</div>

@Component({...})
export class ExampleComponent {
  @ViewChild('math', { static: false, read: MathJaxDirective })
  mathJax?: MathJaxDirective;

  updateField(html: string): void {
    this.field = html;

    setTimeout(() => this.mathJax.MathJaxTypeset());
  }
}

Это простой пример с небольшой проверкой, я просто предполагаю, что вам нужно использовать setTimeout, чтобы войти в следующий цикл обнаружения. Вы также можете подумать об использовании геттера и сеттера для field и вызвать его там. Возможно, вы даже можете использовать Pipe, но я не совсем уверен

...