Angular4在div中加载外部html页面答案

【问题标题】：Angular4 Load external html page in a divAngular4在div中加载外部html页面
【发布时间】：2018-03-21 10:54:54
【问题描述】：

我在 angular1 中有一个应用程序，我正在使用 jquery 在我的 HTML 元素中加载一个外部页面。这是我的容器元素的 html：

<div id="externalContainer" class="text-center">
</div>

我使用以下脚本加载外部页面。

$( "#externalContainer" ).load( myExternalPageLink );

现在这似乎在 angular4 中不起作用，专家可以指导我如何在 angular4 中实现此功能吗？

【问题讨论】：

我知道我在这里聚会有点晚了，但是我在尝试解决自己的问题时遇到了这个问题，并想分享以防其他人遇到同样的问题。我还试图允许在我们的博客的外部 html 中使用自定义组件。我在blog (dynamically generate angular components from external html) 上记录了这一切。希望这对遇到此问题的下一个人有所帮助。

标签： angular typescript ecmascript-6

【解决方案1】：

你可以使用[innerHtml] 之类的东西

<div [innerHtml]="myTemplate">
</div>

在你的组件中

export public class MyComponent {
    private myTemplate: any = "";
    constructor(http: Http) {
        http.get(myExternalPageLink).map((html:any) => this.myTemplate = html);
    }
}

【讨论】：

我可以用这个加载本地文件吗？
我尝试用这个加载一个本地文件，但是 myTemplate 变量是空的。
@RaduCojocari 我使用了 safeHtml Pipe 然后它工作正常！见stackoverflow.com/a/39794649/1896897
我是 angular 8 的新手。cmd error TS2304: Cannot find name 'Http' 中出现错误。我必须在某个地方导入它吗？
@jitender 谢谢，这就像我需要的那样工作，它的实现非常简单。