Angular 2中的语法高亮显示
|
我正在使用角度2创建简单的Web应用程序.我有两个组件.首先是基本上包含一些数据行的表.当执行单击行时,对应于行的数据显示在第二个组件中.数据是
XML,加载到代码元素.它看起来像
@Component
export class TableComponent {
items: Data[];
selectedItemsXml: string;
...other stuff
//when row is clicked
toggleSelectedRow(rowIndex: number) {
...other stuff related to change row's background color
this.selectedItemsXml = this.items[i].xml;
}
...other stuff again
}
//TableComponent's template
<div>
<table>
...
...*ngFor="let item of items; let i = index;"...
<tr (click)="toggleSelectedRow(i)">
<td>{{item.id}}</td>
<td>{{item.time}}</td>
</tr>
...
</table>
</div>
<xml-detail [xml]="selectedItemsXml"></xml-detail>
@Component
export class XmlDetailComponent {
@Input() xml: string;
}
//XmlDetailComponent's template
<div>
<pre><code>{{xml}}</code></pre>
</div>
一切正常,直到我想为xml添加语法高亮.首先,我想使用插件ng2-prism,但我有问题使其正常工作.在我看到git repo中的问题之后,我把它扔掉了.我接下来尝试的是使用highlight.js基于这篇文章创建指令：highlight.js does not work with Angular 2.使用此方法突出显示Xml,但仅点击第一次行.单击另一行时,甚至不显示新的xml.我也尝试使用prism.js,但我得到了同样的行为.一旦某个xml字符串第一次绑定,显示在代码元素中并使用highlight.js或prism.js突出显示,它仍然存在. 我的猜测是它与DOM和数据绑定在角度2中的工作方式有关,因为不使用语法高亮,我每次选择行时都绑定并将字符串传递给代码元素.使用突出显示导致绑定字符串,将其传递给代码元素然后预先设置它.这意味着代码元素中没有简单的字符串,但是很多样式化的span元素,在选择新行时会导致加载新xml字符串的问题.我还尝试使用Prism.highlight(text_to_prettify)绑定“pre-prettified”字符串,但是使用此方法会导致显示带有Prism添加的所有span元素的xml. 现在,我正在考虑如何解决这个问题.请给我一些推动,我怎么能让它工作. 解决方法
我会创建一个利用prismjs的组件.
包括prismjs脚本,包括您需要的components文件夹中的任何脚本. 的index.html <link href="node_modules/prismjs/themes/prism.css" rel="stylesheet" /> <script src="node_modules/prismjs/prism.js"></script> <script src="node_modules/prismjs/components/prism-core.js"></script> <script src="node_modules/prismjs/components/prism-clike.js"></script> <script src="node_modules/prismjs/components/prism-csharp.js"></script> 安装Prism的最新类型定义文件(这将为您提供类型安全性)： npm install @ryancavanaugh/prismjs 注意：不要安装@ types / prismjs – 它要么已过期,要么未正确创作. prismjs的作者推荐@ ryancvanaugh / prismjs作为类型定义. 将该文件夹添加到tsconfig.json中的typeRoots列表属性中,以便typescript编译器可以找到它： tsconfig.json(在compilerOptions下) "typeRoots": [ "node_modules/@types","node_modules/@ryancavanaugh" ] 创建一个调用Prism.highlight的自定义棱镜组件： prism.component.ts /// <reference path="../node_modules/@ryancavanaugh/prismjs/prism.d.ts" />
import {
Component,AfterViewInit,Input,ElementRef,ViewChild
} from '@angular/core';
@Component({
moduleId: module.id,selector: 'prism',template: `
<div hidden="true" #rawContent>
<ng-content></ng-content>
</div>
<pre>
<code [innerHTML]="content">
</code>
</pre>
`
})
export class PrismComponent implements AfterViewInit {
@Input() language: string;
@ViewChild("rawContent") rawContent: ElementRef;
content: string;
constructor(private elementRef:ElementRef) {
}
ngAfterViewInit() {
this.content = Prism.highlight(this.rawContent.nativeElement.innerHTML,Prism.languages[this.language]);
}
}
在app.module中声明Prism组件： app.module.ts import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { PrismComponent } from './prism.component';
@NgModule({
imports: [
BrowserModule,HttpModule
],declarations: [AppComponent,PrismComponent],providers: [/* TODO: Providers go here */],bootstrap: [AppComponent],})
export class AppModule { }
像这样使用它： <prism language="csharp">
var x = 3;
class T
{{ '{' }}
{{ '}' }}
</prism>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |