如何使用Angular 6调用Chrome内置的xml解析器？

Question

我们在云上有一组XML文档，我们希望使用Angular提供这些文档。我们有一个XSL文件，其中包含所有XML文档所需的转换。(这些文档都采用相同的格式。)理想情况下，我们希望最大化客户端的工作(云上的CPU周期比客户端上的CPU周期花费更多的钱)。每个文档都有一个指向XSL文件的嵌入式链接，如下所示：

<?xml-stylesheet type="text/xsl" href="CCD.xsl"?>

如果我只是从Mac终端使用Chrome打开XML文档，如下所示：

sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files [file].xml

...Chrome足够智能，可以看到XSL引用，并使用其原生的XSLT处理器生成最终用于显示文档的HTML。我可以使用Angular获得相同的行为吗，还是必须使用Angular的组件来显示数据？

似乎Angular严重偏向于使用Typescript构建组件，我看到有很多解决方案将XML解析为JSON，然后基于JSON构建Angular组件。但是，如果Chrome已经知道如何转换XML文档，而我又有一个XSL文件，那么转换成JSON似乎需要很多额外的处理。我觉得也许有一种方法可以让Chrome自己处理XSLT。

Answer 1

我想记录下我最终决定的答案，但首先，我想澄清一下。

我假设我们使用的是Angular Universal，它在服务器和客户机级都使用Angular。但这是错误的:我们使用的是plain ol Angular，它被设计成输出.html和.js文件，供世界各地的浏览器使用，在那里除了部分API请求之外，几乎所有的事情都是在客户端完成的。所以我提到的“最大化客户端的工作”误解了用例:所有的工作都已经在客户端完成了。

我从来没有找到一种方法来让Chrome打开一个XML文件并应用一个XSLT转换，只需以一种巧妙的方式将它传递给Chrome，但考虑到无论我如何处理它，浏览器都会做所有的工作，我接受了Martin Honnen的建议，使用xsltProcessor。

This link展示了使用xlstProcessor的基本方法，我并没有偏离这一点太远。

// initialize stuff
    const xsltProcessor = new XSLTProcessor();
    const parser = new DOMParser();
    const xmlRequest = new XMLHttpRequest();

    // Get XSL stylesheet
    xmlRequest.open('GET', 'assets/CCD.xsl', false);
    xmlRequest.send(null);
    const xsltDocument = xmlRequest.responseXML;

    // Parse core string retrieved from the server to formal XML document
    const xmlDocument = parser.parseFromString(this.source, 'text/xml');

    // Load stylesheet, transform to html
    xsltProcessor.importStylesheet(xsltDocument);
    const html = xsltProcessor.transformToDocument(xmlDocument);