Question

我在Angular2中构建应用程序，我有两个问题：

首先：如何在网页上启动应用程序两次（我在加载Angular App的PLAIN-HTML页面上，我不在组件中）：

<div id="myFirstApp" appEngine>Loading 1</div>

<div id="mySecondApp" appEngine>Loading 2</div>

应用正在使用相同的选择器（appEngine）开始使用。但只有一个应用程序正在启动（第一个）。

第二：如何在我的角度2应用程序中获取div的ID，或者我如何获得应用程序的一些特殊参数？

我希望你能帮助我。

最诚挚的问候Hackbard

Answer 1

为什么不重复使用顶级组件？只需在顶部创建另一个顶级组件，并使其布局如下：

template: '<main></main><main></main>'

如果您想要提供某种不同的数据，只需添加@Input字段，然后将其提供给模板：

template: '<main [someData]="something"></main><main [someData]="somethingElse"></main>'

让同一个应用程序运行两次，有两个bootstraps真的不是一个好主意。最好留在框架内。

Answer 2

我在搜索如何引导同一应用程序的多个应用程序根/实例时发现了这个问题。这可以通过在NgModule ngDoBootstrap方法中手动引导根级别组件来完成。

（请注意，在Angular 5+中可能不再需要此方法，请参阅this Angular PR）

我们首先找到我们想要引导的所有根元素，并为它们提供唯一的ID。然后，对于每个实例，使用新ID攻击组件工厂选择器并触发引导程序。

const entryComponents = [
  RootComponent,
];

@NgModule({
  entryComponents,
  imports: [
    BrowserModule,
  ],
  declarations: [
    RootComponent,
  ],
})
export class MyModule {
  constructor(private resolver: ComponentFactoryResolver) {}

  ngDoBootstrap(appRef: ApplicationRef) {
    entryComponents.forEach((component: any) => {
      const factory = this.resolver.resolveComponentFactory(component);
      let selectorName;
      let elements;

      // if selector is a class
      if (factory.selector.startsWith('.')) {
        selectorName = factory.selector.replace(/^\./, '');
        elements = document.getElementsByClassName(selectorName);

      // else assume selector is an element
      } else {
        selectorName = factory.selector;
        elements = document.getElementsByTagName(selectorName);
      }

      // no elements found, early return
      if (elements.length === 0) {
        return;
      }

      // more than one root level componenet found, bootstrap unique instances
      if (elements.length > 1) {
        const originalSelector = factory.selector;

        for (let i = 0; i < elements.length; i += 1) {
          elements[i].id = selectorName + '_' + i;
          (<any>factory).factory.selector = '#' + elements[i].id;
          appRef.bootstrap(factory);
        }

        (<any>factory).factory.selector = originalSelector;

      // only a single root level component found, bootstrap as usual
      } else {
        appRef.bootstrap(factory);
      }
    });
  }
}

现在，假设我们的RootComponent的选择器是'.angular-micro-app'，这将按预期工作：

<body>
    <div class="angular-micro-app"></div>
    ...
    <div class="angular-micro-app"></div>
</body>

如何在网页上两次使用相同的angular2应用程序

2 个答案: