没有路由插座的角度路由多个组件

我正在尝试学习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

没有路由插座的角度路由多个组件

回答

相关问题