路由器不生成父組件的模板？

我試圖將我的路由系統從Beta/RC1樣式（@ angular/router-deprecated）遷移到RC4（@ angular/router）中可用的樣式。路由器不生成父組件的模板？

看起來很直白，除非我一直掛在父路由器組件和子項的概念上。在我的路由器的父路徑中定義的實際組件似乎沒有爲我的一些路徑顯示它的模板。該父級是包含新內容的包裝器<router-outlet>

我的儀表板路由工作得很好。它最初加載成員資格子，並且DashboardComponent中包含的包裝器內容顯示出來，允許導航到每個孩子。

export const DashboardRoutes: RouterConfig = [ 
    { 
     path: "dashboard", 
     component: DashboardComponent, 
     children: [ 
      { path: "", redirectTo: "membership" }, 
      { path: "executive", component: ExecutivePanelComponent }, 
      { path: "membership", component: MembershipPanelComponent } 
     ] 
    } 
];

但在我的網站的另一個可導航區域，它不起作用。它只是呈現一個空白屏幕，儘管瀏覽器中的URL顯示正確。沒有顯示ReportCatalogComponent的內容。

export const ReportCatalogRoutes: RouterConfig = [ 
    { 
     path: "catalog", 
     component: ReportCatalogComponent, 
     children: [ 
      { path: "", component: EmptyComponent }, 
      //{ path: "report/:id", component: ReportDetailsComponent, data: { create: false } }, 
      { path: "report", component: ReportDetailsComponent, data: { create: true } } 
     ] 
    } 
];

我究竟在做什麼錯在這裏？

來源

2016-07-05 twilliams

我似乎已經縮小了原因，但我不確定它爲什麼這樣做。簡單的事實是，我在我的指令列表中包含另一個指令是造成這個問題的原因。即使將該指令剝離爲裸露骨骼也不會做任何事......這會阻止父模板呈現。 – twilliams

因此，經過更多的深入挖掘並試圖簡化問題，我想我已經遇到了這個原因。

我的父路徑包含一個指令，它被引用如下。

import { ReportTileComponent } from "./index";

解決這個問題的解決方案，它似乎至少在卸下所有其它潛在問題後，是直接引用該組件。

import { ReportTileComponent } from "./main/report-tile.component";

對此的推理使我困惑不已，但它解決了我的問題。

來源

2016-07-05 21:11:03 twilliams

我已經看到它提到'index.ts'中的導出順序有時很重要，但是我自己還沒有遇到這個問題。 –

路由器不生成父組件的模板？

回答

相關問題