Question

假设页面中已存在角度运行。我想在其中注入/添加一个孤立的角度应用程序（它与现有的角度应用程序隔离运行而不会受到干扰）。

例如，我想1）在页面中插入一个自定义元素<app-root-two></app-root-two>然后2）初始化/引导该应用程序（反之亦然）。

我将如何实现这一目标？

我知道在AngularJs中它是可能的，因为你可以检索DOM元素并使用angular.boostrap(<dom-element>)来初始化它，但我不认为Angular具有相同的手动引导模式。它是抽象的，它直接转到DOM来查找根元素，通常是页面中的<app-root>。

我正在使用的当前角度版本是5.2版本和Angular CLI 1.6.6。我已经尝试了.angular-cli.json文件来生成多个应用程序但是它针对两个单独的“index.html”文件，即一个项目中的两个应用程序，不一定在一个页面中。

Answer 1

在第二个AppModule上需要另一个根元素。然后只需导入第二个应用程序脚本（运行时，样式等），但首先导入delete window.webpackJsonp。

例如

<app-one></app-one>
<app-two></app-two>

<script type="text/javascript" src="app-one/runtime.js"></script>
<script type="text/javascript" src="app-one/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-one/polyfills.js"></script>
<script type="text/javascript" src="app-one/styles.js"></script>
<script type="text/javascript" src="app-one/vendor.js"></script>
<script type="text/javascript" src="app-one/main.js"></script>

<script>delete window.webpackJsonp</script>

<script type="text/javascript" src="app-two/runtime.js"></script>
<script type="text/javascript" src="app-two/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-two/polyfills.js"></script>
<script type="text/javascript" src="app-two/styles.js"></script>
<script type="text/javascript" src="app-two/vendor.js"></script>
<script type="text/javascript" src="app-two/main.js"></script>

尽管-到目前为止-可行，但该框架显然不是为此设计的。带有进一步分块功能的更复杂的应用程序可能会对应用程序的运行时间产生问题，而在删除webackJsonp对象时，您实际上要对其进行更改。

用于全局原型的填充，您可以跳过重新导入。

Answer 2

查看overall-structural-guidelines

您只需加载一个应用程序，但可以编排（延迟加载）许多不同的模块，这些模块将作为应用程序运行。每个子主要模块都将拥有它所需的所有模块，服务，组件等，并且它将被隔离。

Answer 3

在查看源代码后，我不得不做一些覆盖。 AngularJs自动执行两件事：1）引导任何“ ng-app” 2）添加标签。防止任何冲突。我把这两点都注释掉了。取而代之的是，我取了tag的内容并将其放在我的scss文件中，并手动引导我的自定义元素

另一件事是Angularjs是在chrome扩展内容脚本的上下文中加载的，因此直接在内容脚本中定义的任何全局窗口都不会渗入用户页面。

最重要的是，我确实使用shadow dom进一步隔离了应用程序，因此没有css / js东西渗入/流出。只要我不修改页面的任何常见方面，就可以了，例如位置。我需要根据生命周期添加/删除任何全局事件绑定。最终结果如下所示：

{@docRoot}/JME_LICENSE.html

在一页中运行多个Angular应用程序

3 个答案: