没有路由出口的角度路由多个组件

Question

我正在尝试学习 Angular，为此我创建了一个像应用程序这样的小文件浏览器。它有两个组件，布局如下：

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

• DirectoryList 组件显示当前选定目录中的文件和文件夹列表。单击文件将其选中并在详细信息组件（共享服务）中显示详细信息。双击文件夹将其打开并更新 DirectoryList 以显示其内容。
• 详细信息组件显示有关当前选定文件的信息。

我想做的是让 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

我已经阅读了 Angular 中的路由机制，但我找不到这样做的方法（在我看来应该很简单）。每个配置似乎都表明我必须将路由与组件结合起来，并将该组件显示在 <routing-link> 容器中。但是，我所有的路线都使用完全相同的组件，因此不需要这样的容器。我唯一想要的是让 DirectoryList 在路径发生变化时得到通知，并相应地更新自身和 Details 组件（共享服务）。

我在这里误解了一些基本的东西吗？这可以通过简单的方式实现吗？

Answer 1

我根据您的评论给出这个答案。如果你想检测查询参数的变化，你应该订阅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
• https://toddmotto.com/dynamic-page-titles-angular-2-router-events

希望对你有帮助！