Перезагрузите PrimeJS выделенный код приложения Angular

Question

У меня следующий вопрос... У меня есть приложение Angular 4+, и я использую PrimeJS для обработки подсветки синтаксиса (я следовал учебному пособию Tero https://auralinna.blog/post/2017/code-syntax-highlighting-with-angular-and-prismjs). Проблема у меня заключается в следующем:

В моем шаблоне компонента у меня есть следующий код:

<pre><code [ngClass]="languageClass">{{ text }}</code></pre>

как вы можете видеть, я делаю привязку для обработки другого кода и формата в соответствии с некоторыми условиями в компоненте. По какой-то причине, когда text а также languageClass свойства меняются, это не отражается на шаблоне. Выделенный код застревает с самым первым значением, установленным в компоненте. Есть идеи, как это решить? Спасибо

Answer 1

Наконец, я решаю это, вызывая функцию обнаружения изменения шаблона вручную, как только изменяется привязка свойства кода. Код выглядит примерно так:

import { ChangeDetectorRef, .... } from '@angular/core';

@Component({....})
export class MyComponent {
    constructor(private ref: ChangeDetectorRef) {}
    ...
    getSomeText() {
        this.text = null;
        this.ref.detectChanges();
        ...
        this.text = '<foo></foo>';
    }
}

И шаблон компонента:

<pre *ngIf="bodyText !== null"><code>{{ text }}</code></pre>

Как вы можете видеть <pre></pre> тег исчезнет, ​​как только свойство text изменить на ноль. Затем он будет визуализирован снова с новым значением, которое будет выделено.