Question

我正在构建一个CMS，我正在尝试重新渲染Prism.js，当文章的主体发生变化时，会在预览中显示语法highlignting。

模板：

<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

我按照上面评论中的建议解决了这个问题。我只需将这个设置为真实：

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

表格中需要（ngModelChange）：

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

由于

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

1 个答案: