Google Cast is="google-cast-button" 在 Angular 组件内部时未加载答案

【问题标题】：Google Cast is="google-cast-button" Not Loading When Inside Angular ComponentGoogle Cast is="google-cast-button" 在 Angular 组件内部时未加载
【发布时间】：2018-06-14 20:58:34
【问题描述】：

我正在尝试将 Google Cast 添加到我的音乐应用中。当我在 index.html 文件中包含按钮和脚本时，它可以正常工作。但是，当我将按钮移动到组件时，它不再注册按钮。我尝试将此代码添加到组件构造函数中，以延迟转换库的加载时间，但它仍然没有注册：

let script = window['document'].createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1');
window['document'].body.appendChild(script);

我从这个 npm 的源代码中复制了这个想法：

https://www.npmjs.com/package/ng-cast

知道如何让 is="google-cast-button" 在加载过程后期注册吗？

【问题讨论】：

ng-cast 甚至不使用这个属性。您确定有必要实现您想要的行为吗？
如果我想在组件中加载按钮，我必须弄清楚如何像这样拉出一些东西
不过，我认为您不需要该属性。 JavaScript 转换框架允许您自己将按钮连接到 Chrome 的转换功能。这只是多一点工作。查看 ng-cast 的其余源代码。或者......也许只是使用 ng-cast 而不是重新发明轮子？

标签： javascript angularjs angular chromecast google-cast

【解决方案1】：

在我看来，最强大的解决方案是将schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 添加到您的 app.module.ts 或 feature.module.ts。通过这样做，您可以使用 <google-cast-launcher></google-cast-launcher> 在您的应用程序中放置 chrome cast 按钮，这比在您的组件中手动弄乱 DOM 稳定得多。

【讨论】：

【解决方案2】：

我在 react.js 中发现了这一点——如果按钮是通过 innerHTML 创建的，那么 Web 组件的“is=”脚本将不会运行。让脚本在动态创建的按钮上运行的唯一方法是使用 document.createElement 语法。这可能意味着深入研究角度以找出如何以这种方式创建一个。在 react 中，这意味着等待 componentDidMount 并以这种方式将元素插入 DOM。

所以不是很大的帮助，但可能是下一步尝试的提示（假设已经几个月了）。

【讨论】：