如何从NgbModal中的延迟加载模块中打开组件？

Question

尝试从延迟加载的模块加载动态组件时遇到问题。 更准确地说，我试图以模式（ https://ng-bootstrap.github.io/#/components/modal/examples ）而不是在单独的页面中打开登录组件，同时还要保持单独的登录路径/页面完好无损。

现在，在我看来，有一种选择是我必须急于将登录组件加载到应用程序模块中，这不过是一个临时的技巧。 因此，我不需要此解决方案。

我已经尝试过直接使用该组件，但是正如我预期的那样，它给了我以下错误：

找不到SigninComponent的组件工厂。 您是否将其添加到@ NgModule.entryComponents？

我搜索并找到了此链接： https : //github.com/angular/angular/issues/14324但无法使其正常工作。

我很奇怪，因为这是一个非常常见的用例，因此无法找到适当的解决方案。 任何帮助或建议，表示赞赏。 谢谢！

Answer 1

通过选择器未在模板中直接使用的组件必须添加到@NgModule装饰器中模块的entryComponents数组中。 在引导程序中打开模态时，实际上并没有在任何地方使用组件的选择器，因此SignInComponent就是这样的一个例子。

你会做这样的事情

@NgModule({
    //...
    declarations: [
        SignInComponent,
    ],
    entryComponents: [
        SignInComponent,
    ]
})
export class LazyLoadedModule {
}

用于标记要编译的组件，即使未通过其选择器在任何其他组件的模板中引用该组件。

您可以在此处了解有关入门组件，它们如何工作以及为什么需要以这种方式声明它们的更多信息 。 以及此StackOverflow 帖子 。

Answer 2

这就是我设法完成您想做的事情的方法。 这个想法是，由于登录组件位于延迟模块中，由于延迟模块在导航至某些路由时由路由器加载，因此您需要在模式内部导航至加载延迟模块并显示登录信息的路由零件。 这可以使用命名的路由器插座来完成。 我对命名路由器插座的经验不是很丰富，因此可能有一些需要改进的地方，但似乎可行。

因此，假设您有一个惰性模块LoginModule ，并且空路径路由显示了登录组件，那么以下是如何定义根模块的路由的方法：

export const ROUTES: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'login', 
    loadChildren: './login/login.module#LoginModule'
  },
  { 
    path: 'modal-login',
    component: ModalLoginShellComponent, 
    outlet: 'modal', 
    children: [
       {
         path: '',
         loadChildren: './login/login.module#LoginModule'
       }
    ]
  }
];

home组件将具有一个链接，该链接允许在模式内部打开ModalLoginComponent（如ng-bootstrap示例所示）。 此ModalLoginComponent模板如下所示：

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <router-outlet name="modal"></router-outlet>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

重要的是

<router-outlet name="modal"></router-outlet>

它允许在模态内部导航到一条路线，尤其是到将加载惰性模块的一条路线。

ModalLoginComponent的代码将具有以下ngOnInit（），它将触发导航：

ngOnInit() {
  this.router.navigate([{outlets: {'modal': ['modal-login']}}]);
}

因此，这将在模态主体内加载ModalLoginShellComponent及其默认的延迟加载子路由。 ModalLoginShellComponent是一个愚蠢的组件，什么也不做，只是以其模板为模板

<router-outlet></router-outlet>