2017-08-05 38 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里面,它会被填充。

但是现在,当你直接打网址与孩子联系起来,如果块将具有数据和子路径没有显示