Angular2從一個組件導航到一個兄弟組件，而不撕裂第一個

我剛剛開始學習Angular2，並且我想構建一個非常常見的「list-detail」樣式頁面，類似於：http://xgrommx.github.io/rx-book/index.html。當您單擊左欄中的項目時，它將啓動到中心詳細視圖的導航，而不會撕毀左欄。達到這種效果的最好方法是什麼？Angular2從一個組件導航到一個兄弟組件，而不撕裂第一個

我現在的設計是這樣的：

當我開始在家裏組件，列表組件（child1）將立即加載，它會調用外部API獲取的名字（只名稱）項目列表。點擊左側的項目名稱時，它將創建一個新的細節組件。詳細信息組件在其ngOnInit方法中獲取項目詳細信息。我已經嘗試使用輔助路線將兩個子組件嵌套在同一頁面上，但似乎不起作用。我家的路線是這樣的：

export const HomeRoutes: RouterConfig = [ 
    { 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'home', 
    component: HomeComponent, 
    children: [ 
     { 
     path: '', 
     component: ListComponent 
     }, 
     { 
     path: ':item', 
     component: DetailComponent 
     outlet: 'detail' 
     } 
    ] 
    } 
];

在我home.component.ts我只是有這樣的：

<h2>Home</h2> 

    <router-outlet></router-outlet> 

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

我導航到詳細視圖的方式調用導航（）列表中的分量一樣這樣的：

onSelect(item : string) { 
    this.router.navigate(['/detail', item]); 
    }

但每次我點擊任何詳細信息視圖中顯示不出來的物品，它顯示的錯誤是這樣的：

Error: Uncaught (in promise): Error: Cannot match any routes: 'home/item' 
.

我在使用輔助路線的正確軌道，有沒有更好的方法來實現這個功能？

來源

2016-07-14 Calvin Hu

當前路由器版本在使用routerLink和navigate方法導航到輔助插座時存在一些問題。您應該構建完整的URL並使用navigateByUrl。

this.router.navigateByUrl('/home/(list//detail:detail)

Plunker與example。點擊詳細按鈕，然後點擊管理。管理員在管理員中路由。全屏打開以查看URL形成。

的URL具有以下語義

兒童路徑由/
分離如果路徑的兄弟姐妹，那麼它應該與括號包圍
同級通過//
出口被分離和路徑被分隔：

父/子/（gchild1 // outletname：gchild2）

另一個所以question

來源

2016-07-14 03:40:34

沒有任何理由在「/家庭/（名單//詳細：詳細的」括號後面？而不只是「家/列表/：項目」？ –

事實上更新了回答與原因。我會鏈接另一個q你解釋這個，但可能需要一些時間 –

問題是我沒有兄弟的路徑。我只有兩個兄弟組件，其中一個（列表組件）與家庭組件具有相同的路徑。另一個兄弟組件（細節）具有一個採用參數：item的路徑。在這種情況下如何編寫url？ –

Angular2從一個組件導航到一個兄弟組件，而不撕裂第一個

回答

相關問題