angular - Angular 6 - 多个入口点

Question

我有一个现有的 Angular 应用程序，它带有一个模块，它是一个更大的 django 应用程序的一部分。到目前为止，我有一个编辑器组件（根组​​件），其中包含如下：

<!-- edit.html -->
<editor></editor>

我现在必须实现细节组件，它应该完全独立于编辑器组件，但还包括编辑器用作子组件的一些组件。

<!-- detail.html -->
<detail></detail>

但是当我创建一个新组件并将其添加到 app.module.ts 文件的 [bootstrap] 部分时，我会收到一个错误：

'The selector <editor> did not match any elements'.

因此，仅此一项似乎还不够。我需要一个全新的应用程序吗？新模块？我仍然可以在任一解决方案中使用任何现有的非根组件吗？

哦，如果这有所作为：我使用 webpack。

标签： angularangular6

Answer 1

我找到了一种解决方案：

app.modules.ts：

import {ApplicationRef, DoBootstrap, NgModule} from '@angular/core';

@NgModule({
  entryComponents: [EditorComponent, DetailComponent],
  declarations: [
    EditorComponent,
    DetailComponent
  ],
  //bootstrap: [],
}]
export class AppModule implements DoBootstrap{
  ngDoBootstrap(appRef: ApplicationRef) {
    switch ((<any>window).Mode) {
      case 'editor':
         appRef.bootstrap(EditorComponent, 'editor');
        break;
      case 'detail':
         appRef.bootstrap(DetailComponent, 'detail');
        break;
    }
  }

并在 editor.html 和 detail.html 中设置适当的窗口变量。