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变为null时消失。然后将再次使用新突出显示的值对其进行渲染。

重新加载PrimeJS高亮代码Angular应用

1 个答案: