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

【问题标题】：AddThis Not Working in Angular 6/7 ProjectAddThis 在 Angular 6/7 项目中不起作用
【发布时间】：2019-05-29 16:03:29
【问题描述】：

在需要 AddThis 来共享页面的 Angular 6/7 网站上工作。首先，设置一个简单的 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 中。

任何想法表示赞赏。

【问题讨论】：

标签： angular addthis

【解决方案1】：

无法从HTTPS协议调用HTTP脚本来解决这个问题

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

【讨论】：

谢谢。试过了，但没有任何区别。
这里是解决方案stackblitz.com/edit/angular-addthis-ehh8mx
谢谢 - stackblitz 代表了我迄今为止的工作。它在一页上工作，但在实际应用程序中，在路由/导航到不同组件后会出现问题。 addthis:url 已更新（您可以在检查器中看到它），但是当您单击 AddThis 按钮时，该 url 与路由之前相同。该方法应该是运行 addthis.layers.refresh()，但消息是它没有定义......仍在尝试通过它。