javascript - Angular2 typescript - 打印漂亮的 XML

标签 javascript xml angular typescript pretty-print

我从服务器获得了以下 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>

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

最佳答案

您可以为此创建一个使用 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>

关于javascript - Angular2 typescript - 打印漂亮的 XML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42268268/

相关文章:

angular - 用于将数据传递到Angular指令的语法

angular - Http 获取参数过滤器

javascript - Angular react 形式的单选按钮值为 null

javascript - 如何在 Three.js 中正确渲染小网格上的大纹理?

c++ - 在 vim 中自动关闭 C/C++ 文件中的 xml 标签

Android:在 Eclipse 中重构 XML 文件?

python - 使用 Python ElementTree 减少 html 标题

javascript - 缩小之后加载的 RequireJS 模块

javascript - 从 Canvas 上画出来要花多少时间?

javascript - 如何以秒为单位获取当前日期或/和时间