2017-08-05 37 views
2

我想實現在角4直接鏈接到兒童路線在角4

我有以下途徑與細節基本清單:

{ 
    path: 'list', 
    component: ListComponent, 
    children: [ 
     { 
     path: 'detail', 
     component: DetailComponent, 
     } 
} 

我在ListComponent一個<router-outlet></router-outlet>。當您單擊ListComponent中的鏈接到子路線時,一切正常。但是,當您直接輸入鏈接到瀏覽器中,我得到以下錯誤:

Cannot find primary outlet to load

我認爲,當你瀏覽到一個孩子的路線,它會自動加載父組件。我錯過了什麼嗎?我如何實現它,以便我也可以直接導航到URL?


更新:這裏的ListComponent文件:

<div *ngIf="!loadingData"> 
    <ul> 
     <li *ngFor="let listItem of lists"> 
      <a href="#">{{ listItem.name }}</a> 
     </li> 
    </ul> 
    <router-outlet></router-outlet> 
</div> 
+0

你的'index.html'有什麼?你可以發佈代碼,你在哪裏有列表組件的路由器插座?那裏有一個不應該是的選擇器嗎? – 0mpurdy

+0

我們的服務器上有類似的問題,但只有在node.js提供應用程序時才生產。這是否在角色發展中​​而不是在生產中或兩者兼而有之? – Graham

+0

@ 0mpurdy我已經添加了ListComponent文件。我剛剛意識到這是導致路由器插座無法顯示的ngIf。如果你回答我將標記爲的答案。 –

回答

3

ListComponent*ngIf當它解析爲false,意味着<router-outlet>不在DOM中,給你錯誤。你應該把它移到*ngIf以外

<div *ngIf="!loadingData"> 
    <ul> 
     <li *ngFor="let listItem of lists"> 
      <a href="#">{{ listItem.name }}</a> 
     </li> 
    </ul> 
</div> 
<router-outlet></router-outlet> 
0

什麼有可能是在這裏是當你的路由使用父鏈接的子組件的低數據將出席並作爲路由器插座在一個ngif裏面,它會被填充。

但是現在,當你直接打網址與孩子聯繫起來,如果塊將具有數據和子路徑沒有顯示