我已经制作了一个迷你应用程序来描述该问题,我正在尝试使用Highlight.js突出显示一些代码。问题是,当我从site1按下导航按钮时,它会将我导航到site2,但是高亮显示将不适用,如果我从site2转到site1,也会发生同样的事情,但是如果我刷新任何页面,它将正常工作。
我需要使用导航,因为它不会丢失变量的值。
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']);
}
}
testr.html
<p>testr works!</p>
<pre><code>var char; alert(1+1)</code></pre>
<button (click)="clickme()" value="Link">Link</button>
teste.ts
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']);
}
}
teste.html
<p>teste works!</p>
<pre><code>var char; alert(1+1)</code></pre>
<button (click)="clickme()" value="Link">Link</button>
答案 0 :(得分:0)
Highlight.js无法突出显示“ onload”事件触发时不存在的代码。我猜想只有您的第一个视图实际存在(在页面加载时),而您的第二个视图仅在您“访问”第二个页面时才添加到实际的DOM中。
切换页面后,您需要手动调用initHighlighting
以突出显示现在已添加到页面的所有新代码块。