在页面中多次引导同一个 angular2 模块

Question

我有一个 Web 表单应用程序，它根据配置将用户控件动态加载到页面上（就像具有可重用小部件的 CMS）。我想使用 Angular2 组件实现用户控件/小部件之一。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Ng2Widget.ascx.cs" Inherits="Namespace.Ng2Widget" %>
<div>
     <app-root inputValue="<%= settingsValue %>"></app-root>
</div>

“settingsValue”将是一个服务器端变量，其中包含一些服务器想要传递给组件的值。

因此，如果管理员使用这个新实现的小部件的多个小部件配置页面，则呈现的页面将具有多个相同类型的 Angular2 组件。

渲染的页面基本上会有

<div>
         <app-root inputValue="settingsValue1"></app-root>
</div>
<!-- Some other widgets -->
<div>
         <app-root inputValue="settingsValue2"></app-root>
</div>

为了将值传递到根组件中，我使用了这篇文章中提到的方法。 root 指令上的 Angular 2 输入参数

在页面底部，我放置了将模块引导到 .js 文件的 js 文件。

<script type="text/javascript" src="ng2/dist/inline.bundle.js"></script>
<script type="text/javascript" src="ng2/dist/styles.bundle.js"></script>
<script type="text/javascript" src="ng2/dist/main.bundle.js"></script>

一旦页面被加载，Angular 只会将模块引导到标签的第一个实例，而完全忽略第二个实例。

我在网上找到的所有示例都试图引导不同模块类型的多个模块，这似乎工作正常。

在 Angular1 中，根应用程序的作用域是一个 dom 元素，任何带有 ng-controller 属性装饰的 dom 元素都会在各自的位置加载组件。

在早期版本的 Angular2 中，我们能够引导一个组件。但是随着 NgModule 的引入，一个模块正在被引导。但即便如此，我也不认为可以将同一个组件引导到多个实例。（即标记的所有实例，呈现组件。）

我在https://www.reddit.com/r/Angular2/comments/424nwn/using_angular_2_without_it_being_a_single_page_app/看到了关于相同的讨论

我觉得这与旧服务器端驱动的应用程序试图使用像 Angular2 这样的客户端框架有关。我能够非常轻松地使用 React 组件，因为它们在运行时通过简单的渲染方法调用渲染并附加到 dom 元素。

有什么方法/解决方法可以在页面中引导同一模块的多个实例？IE。在所有出现的标记中加载组件。

Answer 1

我有完全相同的问题，在挖掘网络后，我终于在这个plnkr中找到了解决方案：

https://plnkr.co/edit/I6kxKa78Np73sIWbbYHz?p=preview

神奇的部分在于 ngDoBootstrap 函数：

ngDoBootstrap(appRef : ApplicationRef) {
    this.components.forEach((componentDef : {type: Type<any>, selector: string}) => {
      const factory = this.resolver.resolveComponentFactory(componentDef.type);
      factory.selector = componentDef.selector;
      appRef.bootstrap(factory);
    });
}

想法是在包装器模块中注入组件实例列表，并引导 ComponentFactoryResolver 检索的每个组件。

希望这有帮助。