Question

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

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

这将返回一个包含单个document.write（）的javascript文件，其中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;
}

这会在浏览器控制台中发出警告：

无法在'Document'上执行'write'：无法写入从异步加载的外部脚本转换为文档，除非它被明确地打开了。

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

有没有人知道我应该如何在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

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

1 个答案: