3

ng2 -smart-table 应用程序文档code元素片段如下所示:

<code highlight class="typescript">{{ snippets.require }}</code>

生成的文档如下所示

查看生成的应用程序 html 时,似乎highlightjs正在突出显示,但我没有看到将执行转换的角度依赖项的导入(或脚本的任何预处理),所以只是想知道它是如何工作的?

根据答案

用 Angular 来做这件事是多么的简单,这真是太酷了:

import { Directive, ElementRef, AfterViewInit } from '@angular/core';
import * as hljs from 'highlight.js';

@Directive({
selector: 'code[highlight]',
})
export class HighlightCodeDirective implements AfterViewInit {

constructor(private elRef: ElementRef) { }

ngAfterViewInit() {
    hljs.highlightBlock(this.elRef.nativeElement);
}

}
4

1 回答 1

2

更仔细地检查代码,有一个使用highlightjs 的高亮 指令(ng2-smart-table/src/app/shared/directives/highlight.directive.ts)。它是示例应用程序的一部分而不是库,因此如果您想在应用程序中执行相同操作,则需要复制它。

于 2018-11-21T22:41:53.227 回答