在同一頁上的兩個Angular2組件

我不得不說我剛開始研究Angular2，它看起來很有趣。在同一頁上的兩個Angular2組件

我對這個問題今天偶然在那裏我可以這樣來配置路線：打開

{ 
    path: 'artists', 
    component: ArtistComponent, 
    children: [ 
     { path: ':id', component: ArtistsDetailComponent }, 
     { path: '', component: ArtistsHomeComponent }, 
    ] 
},

想法是在左邊顯示藝術家列表（ArtistComponent），並點擊時，會出現此詳細視圖（ArtistsDetailComponent）在右側。

ArtistsComponent模板有它，所以當瀏覽到/ artists /：id我真的看到左側的文章列表和右側的詳細視圖（在這個router-outlet）。

除了我需要讓這兩個組件相互通信，所以當我在詳細視圖中進行更改時，它應該在列表中進行更改。

google搜索的時候，我看到，我應該用變量映射信息一起使用組件選擇：

<artist-detail [artist]="selectedArtist"></artist-detail>

但後來我得到一個錯誤，說我沒有路由器的出口和角度都不知道在哪裏放置ArtistsDetailComponent視圖...

所以專家，請幫助...！ :)

來源

2016-07-13 Mr. M

請您複製並粘貼確切的錯誤？ –

這聽起來像是你可能需要使用[多個銷售點]的時候（https://angular.io/docs/ts/latest/api/router/index/RouterConfig-type-alias.html）不知道這是否你正在尋找什麼，它目前處於一個令人不安的實驗階段，但它可能是值得你花時間來看看 –

有兩種矛盾的方法。要麼使用子路由，在這種情況下，詳細信息組件應嵌入到<router-outlet>中，或者「手動」嵌入您的詳細信息組件，如<artist-detail>。由於您試圖混合它們（子路由和手動嵌入模板），路由器抱怨找不到將子路由組件放入的出口。

因此，無論您放棄子路線，然後您可以用[]語法傳遞參數，或者您堅持使用子路線，然後詳細信息組件應該從路線參數中提取id並收集詳細信息。你如何收集細節取決於你的模型。我在Redux中保持應用程序狀態，並從那裏獲取。您也可以使用共享服務。

來源

2016-07-13 21:09:08 smyk

謝謝，這有助於我得到它的工作。所以我放棄了孩子的路線（但仍然有'path：'artists /：id''）的相同類型的URL並手動嵌入''組件。「artists /：id」路徑現在正在使用ArtistComponent，它通過''顯示藝術家列表和其旁邊的詳細信息。我之前嘗試過放棄孩子的路線，但我無法弄清楚如何在同一頁面上顯示列表和細節 - 我需要做的就是讓「artists /：id」路線使用「ArtistsComponent」（列表）而不是'ArtistsDetailComponent'（細節）。 #embarrassing –

在同一頁上的兩個Angular2組件

回答

相關問題