如何将 Angular 5 应用程序嵌入到另一个页面的 HTML 中？

Question

好吧，我正在处理一个项目并使用 Angular 5.2.0，我在其中使用他们的服务和一些模块完成了一个组件。想要此组件的公司更喜欢在其页面中包含 angular 应用程序，如小部件。

我正在尝试这样的代码 and this option 但我不明白他们是怎么做到的。我想知道关于这个问题的另一种方式或更好的解释。

我可以将我的所有应用程序打包到一个 javascript 中以包含在 HTML 页面中吗？

Answer 1

您需要创建一个自定义 Angular 元素，然后使用 webcomponent polyfills（大多数浏览器本身不支持 web components）将 angular 元素加载到任何 HTML页。

您可以查看以下网址：

https://angular.io/guide/elements

https://blog.angulartraining.com/tutorial-how-to-create-custom-angular-elements-55aea29d80c5

虽然我不太确定 Angular 5 是否支持它。但是 Angular 6 确实支持自定义元素。

Answer 2

我发现的最佳解决方案是在 HTML 中使用 iframe 标记。例如：

<iframe id="Example"
    title="Example"
    width="400"
    height="400"
    src="http://localhost/example">
</iframe>

工作正常。不过，还是有些慢。希望对你有帮助。