Angular2打字稿-打印漂亮的XML

问题描述：

我有以下来自服务器的XML字符串:

I have this following XML string I got from the server:

<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>

但是我想在我的模块中美化它:

But I want to beautify it in my module:

<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>

打印美化的最佳方法是什么?

What is the best way to print it beautified?

答

您可以为此创建使用 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中声明自定义管道，例如:

Declare the custom pipe in your app.module, e.g.:

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

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

然后您可以在模板中使用自定义管道，如下所示:

And then you can use the custom pipe in your templates like so:

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

Angular2打字稿-打印漂亮的XML

相关推荐