Question

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

所以我遵循YouTube Developers提供的标准方式。加载页面时按钮不会显示。有什么我想念的吗？

项目规格：
Angular 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>

如果您使用角度，则您的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代码 会进入 模板文件 和 JS代码 将进入您的 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;
}

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

2 个答案: