angular - 在页面中多次引导相同的 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>

为了将值传递到根组件，我使用了这篇文章中提到的方法。 Angular 2 input parameters on root directive

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

的 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);
    });
}

想法是将您的组件实例列表注入(inject)包装器模块，并引导 ComponentFactoryResolver 检索的每个组件。

希望这对您有所帮助。