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

Question

我正在尝试在我的 angular 组件之一中添加订阅按钮。

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

项目规格：
Angular 5
打字稿 2.4

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

Answer 1

将脚本包含在 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 file.

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

Answer 2

您似乎必须动态附加 YouTube 脚本。您可以执行如下操作，首先将 html 粘贴到您的代码或任何 html 文件中。

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

Thought you are using angular your YouTube button won't get initialized.

我有一个技巧，您可以动态附加 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);

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

This approach you can use for anytime when you need to append js dynamically.

Html code goes into your template file and JS code will goes into your init() function or on click function that dependence on your requirement.

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

Youtube subscribe button not working in Angular project

youtube

youtube-javascript-api

angular