如何從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>