谷歌投射是="google-cast-button"在角度组件内时不加载

Question

我正在尝试将Google Cast添加到我的音乐应用程序中。当我在索引.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"在加载过程后期注册的任何想法？

Answer 1

在我看来

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

Answer 2

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

所以这不是一个很大的帮助，但也许是下一步要尝试的提示(当然已经几个月了(。