AddThis在Angular 6/7项目中不起作用

时间:2019-01-03 03:28:36

标签: angular addthis

在Angular 6/7站点上工作,需要使用AddThis来共享页面。首先,请按照以下步骤设置一个简单的HTML页面:

<html>
<head></head>
<body>
    <div>AddThis below</div>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <a class="addthis_button_facebook"></a>
        <a class="addthis_button_twitter"></a>
        <a class="addthis_button_email"></a>
        <a class="addthis_button_linkedin"></a>
        <a class="addthis_button_compact"></a>
    </div>
    <div>AddThis above</div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c2bf6b040727c90" async="async"></script>
</body>

</html>

这可以正常工作并按预期显示按钮。

然后尝试将其移至Angular。设置一个简单的组件来保存HTML。尝试将脚本标记放入index.html。在组件中也尝试过。在任何情况下,我都无法显示任何内容。

设置StackBlitz angular-addthis

然后向AddThis技术支持咨询。他们表示我可能必须运行方法(addthis.layers.refresh())才能在路由后刷新...但是它永远都走不了那么远。什么也没显示。

在StackBlitz中,AddThis代码是app.component。测试HTML位于standalone.html中。

任何想法都值得赞赏。

1 个答案:

答案 0 :(得分:0)

您无法通过 HTTPS 协议调用 HTTP 脚本来解决此问题

只需将index.html中的脚本修改为 <script src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c2bf6b040727c90" async></script>