Angular4在div中加载外部html页面

时间:2017-10-10 06:24:02

标签: angular typescript ecmascript-6

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

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

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

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

现在这似乎不适用于angular4,专家可以指导我如何在angular4中实现此功能?

2 个答案:

答案 0 :(得分:8)

您可以使用[innerHtml]之类的内容

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

在您的组件中

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

答案 1 :(得分:2)

我知道我在这里参加聚会的时间有点晚了,但我在试图解决自己的问题时遇到了这个问题,想要分享以防其他人遇到同样的问题。

我还试图在我们的博客的外部html中使用自定义组件。

我在blog (dynamically generate angular components from external html)上记录了所有内容。

希望这对遇到此事的下一个人有一定的帮助。