路由從名爲插座名爲插座 - Angular4

我目前正在創建一個應用程序Angular4，這是一個在線遊戲的UI。作爲這個應用程序的一個功能，有一個電話，它包含一個主要路由器插座和一個輔助路由器插座，負責顯示一些提示。由於使用了命名插座，用戶可以在輔助路線仍然顯示的同時在主路線上導航。路由從名爲插座名爲插座 - Angular4

作爲一個獨立的，手機功能的偉大工程。
整個應用程序的結構如下：

## root.component.html ## 
<router-outlet><router-outlet> 
<router-outlet name="phone"><router-outlet> // will load phone.component 
<router-outlet name="other-feature-1"><router-outlet> // will load feature.component

整個應用程序的路線是：

## routes.module.ts ## 
const AppRoutes: Routes = [ 
    { 
     path: '', 
     component: MainComponent, 
     children: [ 
      ... 
     ] 
    }, 
    { 
     path: '', 
     component: PhoneComponent, 
     outlet: 'phone', 
     children: [ 
      { 
       ... non-outlet children 
      }, 
      { 
       path: '', 
       component: HintComponent, 
       outlet: 'hint' 
       children: [ 
        ... 
       ] 
      }, 
     ] 
    }, 
    { 
     path: '', 
     component: FeatureComponent, 
     outlet: 'other-feature', 
     children: [ 
     ... 
     ] 
    } 
];

手機組件內容：

## phone.component.html ## 
<router-outlet><router-outlet> 
<router-outlet name='hint'><router-outlet> 
<div>...graphic content..</div>

主要思路就是它每個功能都有自己的路由器插座，以便我們可以在需要時同時顯示某些功能。

但我沒有成功，因爲我不能填充電話功能，它現在包含一個主要網點和一些輔助插座內部的命名路由器網點此功能在整個UI集成。

問題是：
我如何填充從附屬插座輔助路由器的出口？

這裏的情況抽象普拉克。
僅代表單一特性分支（例如<router-outlet name="phone"><router-outlet>）：
http://plnkr.co/edit/o0DFop?p=preview

我設法從父命名的出口，以導航到子主出口（與this.router.navigate([{outlets: {'phone': 'non-outlet-path'}}])但不能從命名出口父命名的出口孩子。
請看上面給出的普拉克。

感謝。

來源

2017-08-27 SerrurierJ

爲什麼你的路徑是空的？ – headshoT

您的出口名稱的再只是不匹配，在線路66中plunkr app.ts：

<router-outlet name="aux-nested"></router-outlet>

應該是：

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

，以便它在路徑配置（線95）和routerlink出口名稱的出口名稱匹配（第61行）。

來源

2017-08-27 19:58:06 bryan60

嗯，這是一個愚蠢的錯誤。感謝您的快速回答。 – SerrurierJ

路由從名爲插座名爲插座 - Angular4

回答

相關問題