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

似乎您必须动态附加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代码 进入您的 模板文件 和 JS代码 威尔走进你的房间 初始化() 功能或打开 单击函数 这取决于您的需求。

在索引中包含脚本。html文件

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

以及在任何组件中。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;
}