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 => {
     //
});

此外，

我希望它有所帮助！

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

1 个答案: