沒有路由插座的角度路由多個組件

我正在嘗試學習Angular，並且在這樣做時我創建了一個像應用程序一樣的小文件資源管理器。它奠定了這樣的兩個組成部分：沒有路由插座的角度路由多個組件

------------------------------------ 
-      -   - 
- [DirectoryList] - [Details] - 
-      -   - 
-      -   - 
------------------------------------

的DirectoryList部分顯示當前選定的目錄中的文件和文件夾的列表。單擊一個文件選擇它並在Details組件（共享服務）中顯示詳細信息。雙擊文件夾將打開它並更新DirectoryList以顯示其內容。
Details組件顯示有關當前選定文件的信息。

我想要做的是有DirectoryList組件更改其當前打開的文件夾和基於URL的路徑或查詢字符串選定的項目，但我不知道如何做到這一點。我基本上只是想DirectoryList組件做出相應的反應，每當路徑的變化和更新其觀點，就像這樣：

url: http://myapp/root/sub1/sub2 <- Opens the folder sub2 in DirectoryList 
url: http://myapp/root/sub1/sub2/file.txt <- Opens the folder sub2 and the details for file.txt

我在角路由機制讀了，但我不能找到一種方法，做這（在我看來應該很簡單）。每個配置似乎都表明我必須將路由與組件相結合，並將該組件顯示在<routing-link>容器中。然而，我所有的路線都使用完全相同的組件，因此不需要這樣的容器。我唯一想要的是DirectoryList在路徑發生變化並相應地更新自身和Details組件（共享服務）時得到通知。

我誤解了一些根本性的東西嗎？這可以通過簡單的方式實現嗎？

來源

2017-05-31 Thomas

我認爲你正在尋找這個https://github.com/vsavkin/router_mailapp –

@RobinDijkhof感謝您的提示。我會檢查出來的。 – Thomas

您可以使用命名的路由器插座。看看[這一個]（http://onehungrymind.com/named-router-outlets-in-angular-2/） – ulubeyn

我正在根據你的評論給出這個答案。如果您想以檢測查詢參數的變化，你應該訂閱ActivatedRoute的queryParams：

activatedRoute.queryParams.subscribe(params => { 
    //let id = params["id"] 
});

如果要檢測路由器上的變化，你應該訂閱Router的events：

router.events.filter(i => i instanceof NavigationStart).subscribe(event => { 
    // 
});

此外，

Get route query params

我希望它有幫助！

來源

2017-05-31 13:29:37 ulubeyn

謝謝！我在文檔中也看到了這一點。問題在於，這迫使我設置RouterModule並提供至少一個帶有附加組件的路徑以及我試圖避免的routing-outlet標籤。我做了「解決」它有一個額外的組件包裝我的整個應用程序和路由**。猜測沒有其他辦法。 – Thomas

沒有路由插座的角度路由多個組件

回答

相關問題