0

我有下一个问题.. 我有一个 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属性更改时，它不会反映在模板上。突出显示的代码卡在组件中设置的第一个值上。知道如何解决这个问题吗？谢谢

4

1 回答 1

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，标签就会消失。然后它将使用要突出显示的新值再次呈现。

于 2018-07-06T22:03:25.357 回答