为什么突出显示.js重定向后不起作用？

Question

我做了一个迷你应用程序来描述这个问题，我正在尝试使用突出显示.js来突出显示一些代码。问题是当我从站点 1 按下导航按钮时，它会将我导航到站点 2，但突出显示不适用，如果我从站点 2 转到站点 1 也会发生同样的事情，但是如果我在任何页面上刷新它都可以正常工作。

我需要使用导航，因为有了它，我不会丢失变量的值。

Testr.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import hljs from 'highlight.js';
@Component({
selector: 'app-testr',
templateUrl: './testr.component.html',
styleUrls: ['./testr.component.css']
})
export class TestrComponent implements OnInit {
constructor(
private router: Router
) {}
ngOnInit() {
hljs.initHighlightingOnLoad();
}
clickme(){
this.router.navigate(['/teste']);
}
}

测试员.html

<p>testr works!</p>
<pre><code>var char; alert(1+1)</code></pre>
<button (click)="clickme()" value="Link">Link</button>

测试网

import { Component, OnInit } from '@angular/core';
import hljs from 'highlight.js';
import { Router } from '@angular/router';
@Component({
selector: 'app-teste',
templateUrl: './teste.component.html',
styleUrls: ['./teste.component.css']
})
export class TesteComponent implements OnInit {
constructor(
private router: Router
) { }
ngOnInit() {
hljs.initHighlighting();
}
clickme(){
this.router.navigate(['/testr']);
}
}

睾丸.html

<p>teste works!</p>
<pre><code>var char; alert(1+1)</code></pre>
<button (click)="clickme()" value="Link">Link</button>

Answer 1

突出显示.js无法突出显示"onload"事件触发时不存在的代码。 我猜只有您的第一个视图实际存在(当页面加载时(，并且您的第二个视图仅在您"访问"第二个页面时才添加到实际的 DOM 中。

切换页面后，您需要手动调用initHighlighting以突出显示现已添加到页面的任何新代码块。