Angular2打字稿 - 打印漂亮的XML

Question

我這下面的XML字符串我從服務器得到：

<find-item-command xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" find-method="Criteria" item-class="com" only-id="false" xsi:schemaLocation=""> <criteria> <criterion> <descriptors> <descriptor>DPSystemEventItem</descriptor> </descriptors> <value>cluster.manager.active</value> </criterion> </criteria> </find-item-command> 

但我想美化它在我的模塊中：

<find-item-command 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" find-method="Criteria" item-class="com" only-id="false" xsi:schemaLocation=""> 
    <criteria> 
     <criterion> 
      <descriptors> 
       <descriptor>DPSystemEventItem</descriptor> 
      </descriptors> 
      <value>cluster.manager.active</value> 
     </criterion> 
    </criteria> 
</find-item-command> 

什麼是最好的方式打印它美化？

Answer 1

您可以爲此使用vkbeautify創建一個自定義管道。

npm install -S vkbeautify 

定製xml管例如：

import * as vkbeautify from 'vkbeautify'; 
import { Pipe, PipeTransform } from "@angular/core"; 

@Pipe({ 
    name: 'xml' 
}) 
export class XmlPipe implements PipeTransform { 
    transform(value: string): string { 
     return vkbeautify.xml(value); 
    } 
} 

聲明自管你app.module，如：

import { AppComponent } from './app.component'; 
import { XmlPipe } from '...'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     ..., 
     ..., 
     XmlPipe 
    ], 
    ... 

然後你就可以在你的模板一樣使用自定義管所以：

<pre>{{xmlString | xml}}</pre>