如何在改变角度5的Prism.js上重新渲染ngModel

Question

我正在构建一个CMS，并且当文章的正文发生变化时，我试图重新呈现Prism.js，以便在预览中显示语法高级化。

模板：

<textarea 
    [(ngModel)]="article.body" 
    (ngModelChange)="onBodyChange($event)" 
    formControlName="body" type="text" name="body"> 
</textarea>

组件( ngAfterViewChecked()工作，但onBodyChange()不工作)：

onBodyChange() {
    this.highlightService.highlightAll();
    this.highlighted = true;
}

ngAfterViewChecked() {
  if (this.article && !this.highlighted) {
    this.highlightService.highlightAll();
    this.highlighted = true;
  }
}

有些人建议使用以下方法重新呈现Prism.js，但我对如何实现它感到有点困惑：

Prism.highlightElement(预编码)；

这是服务：

import { Injectable, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

import 'clipboard';

import 'prismjs';
import 'prismjs/plugins/toolbar/prism-toolbar';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-scss';

declare var Prism: any;

@Injectable()
export class HighlightService {

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

  highlightAll() {
    if (isPlatformBrowser(this.platformId)) {
      Prism.highlightAll();
    }
  }
}

Answer 1

我根据上述评论中的建议解决了这个问题。我只需将this.highlighted设置为真：

ngAfterViewChecked() {
  if (this.article && !this.highlighted) {
    this.highlightService.highlightAll();
    this.highlighted = true;
  }
}

No (ngModelChange)所需的表格：

<textarea 
    [(ngModel)]="article.body" 
    formControlName="body" type="text" name="body"> 
</textarea>

谢谢