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>