Angular highlight.js停止在路由转换上工作

Question

我的主应用程序组件正确加载并突出显示highlight.js，并且在首次加载时一切正常。

app.component.ts

import { Component } from '@angular/core';
import * as hljs from 'highlight.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
    hljs.initHighlightingOnLoad();
    console.log(hljs);
  }
}

然而，当我导航到另一个组件然后再返回时，highlight.js似乎没有启动？我必须做一个很难刷新。

主根组件使用以下模板显示突出显示的语法代码。

main.component.html

<pre><code class="js">{{code}}</code></pre>

定义路线：

app.module.ts

const mainRoutes: Routes = [
  { path: '', component: MainComponent, pathMatch: 'full'},
  { path: 'document', component: DocumentComponent }
];