如何在ngModel Change Angular 5上重新渲染Prism.js

Question

我正在构建一个 CMS，我正在尝试重新渲染棱镜.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但我对如何实现它有点困惑：

棱镜高亮元素(预码(;

这是服务：

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

我按照上面评论中的建议解决了它。我只需要将这个。突出显示为 true：

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

不需要 (ngModelChange( 在以下形式中：

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

谢谢