0

我有一个场景，我在一个页面上需要多个应用程序，但它们必须是可选的。

所以我有 3 个根标签： 和

但它们并不总是在那里，例如主根可能在一页上丢失。

所以我创建了 3 个 NgModule：

@NgModule({
  imports: [ 
    BrowserModule, 
    HttpModule, 
  ],
  declarations: [ MainComponent, InfoComponent, UserComponent ],
})
export class MainModule { }

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ SubComponent ],
})
export class SubModule { }

@NgModule({
  imports: [ BrowserModule, MainModule, SubModule ],
  declarations: [ AppComponent  ],
  entryComponents: [ AppComponent, MainComponent, SubComponent ]
})
export class AppModule {

  ngDoBootstrap(appRef: ApplicationRef) {
    if(document.querySelector('app-root')) {
      appRef.bootstrap(AppComponent);
    }
    if(document.querySelector('main-root')) {
      appRef.bootstrap(MainComponent);
    }
    if(document.querySelector('sub-root')) {
      appRef.bootstrap(SubComponent);
    }

  }
}

我已经有一个 ngDoBootstrap 方法，它可以（至少似乎）引导在页面上有其选择器的应用程序。到目前为止，一切都很好。

现在是游戏中的路由！所以在“MainModule”里面我放了：

    RouterModule,
    RouterModule.forRoot(routes, {useHash: true})

并添加我的路由和路由器插座，它们也可以正常工作（只要所有根应用程序都在页面上）！

当我有一个页面错过了主应用程序（带有路由的页面）时，麻烦就开始了。现在我得到一个错误：

错误：找不到主插座....

这在一方面是可以理解的（驻留在主应用程序 html 中），但另一方面我认为如果在页面上找不到主应用程序，它甚至不会被引导，那么为什么要打扰呢？

我真的很希望有人理解我试图解释的内容，或者可能做过类似的事情？我完全愿意接受建议，因为我仍在将其作为概念验证来实施......

4

0 回答 0