小编Ano*_*oob的帖子

我正在使用angular 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不适用于Angular 2 …