javascript - 在 Angular2 中加载具有 document.write 的外部 JS

Question

在我当前的项目中，我们希望从包含 document.write 的外部 javascript 文件中获取一个表。过去我们以这种方式做到这一点:

<script src="http://url.to.external.domain.com/file.ashx?sid=<ID>" type="text/javascript"></script>

这将返回一个 javascript 文件，其中包含一个 document.write() 以及需要在脚本标记位置显示的 HTML。

我们现在正尝试在 Angular2 中执行此操作。在 Angular1 中，我通过使用将脚本标记写入模板的指令来设法做到这一点。这很好用。

Angular2 从模板中删除脚本标签，因此这不是解决方案。我试过创建一个单独的组件来“模仿”我在 Angular1 中使用的解决方案，如下所示:

import { Component, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'external-table',
    template: `<script src="http://url.to.external.domain.com/file.ashx?sid={{id}}" type="text/javascript"></script>`
})

export class ExternalTableComponent {
    @Input('id') id: number;
}

这会在浏览器控制台中引发警告:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

由于我无权访问此第三方服务器，因此无法更改此表的生成或检索方式。

有人知道我应该如何在 Angular2 中执行此操作吗？

Answer 1

这是在“npm install --save postscribe”之后使用 PostScribe 在 Angular 7 中加载 DarkSky API 的示例

import postscribe from 'postscribe';

const script = '<script src="https://darksky.net/map-embed/@radar,41.88,-87.62,10.js?embed=true&timeControl=false&fieldControl=false&defaultField=radar"></script>';

postscribe('#darkSky', script);

模板中有ID为“darkSky”的DIV