YouTube订阅按钮在Angular项目中不起作用

Question

我正在尝试将订阅按钮添加到我的一个角组件中。

因此，我遵循YouTube开发人员提供的标准方式，当我加载页面时，按钮不会显示。我缺少什么吗？

项目规范：
角5
打字稿2.4

非常感谢您的时间和帮助。

Answer 1

似乎您必须动态附加YouTube脚本。您可以在下面执行类似的操作，在代码或html文件中首先粘贴HTML。

<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data- 
layout="full" data-theme="dark" data-count="default"></div>

以为您正在使用Angular您的YouTube按钮不会初始化。

我有一个黑客攻击，您可以动态地附加JavaScript文件，以便您的按钮获得初始化。

const node = document.createElement('script'); 
node.src = "https://apis.google.com/js/platform.js"; 
node.type = 'text/javascript';
node.async = true;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);

这将在您的头上动态附加脚本标签，您的按钮将获得初始化。

当您需要动态附加JS时，您可以随时使用此方法。

html代码进入您的模板file and js code 将进入您的 init((函数或单击函数，这些依赖于您的要求。

Answer 2

在index.html文件中包括脚本

<script src="https://apis.google.com/js/platform.js"></script>

和在任何component.html文件中都放在代码下方

<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data- layout="full" data-theme="dark" data-count="default"></div>

您会得到该元素，但在某些情况下不会出现。设置G-YTSSUBSCRIBE位置是CSS文件。

.ytssubscribe{
position:absolute;
top:200px;
left:200px;
}