Angular2 路由 : Multiple Components at once

标签 angular routing

我有一个 Angular 2 应用程序,其中有两个独立的功能,也就是彼此相邻的组件(我们称它们为 A 和 B)。现在我想通过路由改变组件 A 中的内容。到目前为止,一切都很好。这是我们将组件 A 称为应用程序内容组件的正常情况。

我的问题是我还希望能够通过路由更改组件 B 中的内容。

当然,我现在可以创建类似 http://foo.bar/what-lives-in-a/123/what-lives-in-b/abc 的路线 但是想象一下一个应用程序,其中有数百个东西可以存在于 A 中,还有数十个东西可以存在于 B 中。我认为手动创建所有这些子路由太痛苦了。

那么你们中有人知道解决该问题的好方法吗?

最佳答案

您想要的可以通过 2 个独立的路由器 socket 实现。这是有道理的,因为组件是独立的。 因此,您可能已经拥有位于最顶层组件中的主路由器 socket ,并且指定如下: <router-outlet></router-outlet>

要指定另一个,您需要编写以下内容: <router-outlet name="forComponentB"></router-outlet> 之后,您必须像这样为指定的路由器 socket 添加路由:

,{path: "comp-b-path", outlet: "forComponentB", component: ComponentB}

因此生成的 url 看起来像这样: baseurl/comp-a-url(forComponentB:comp-b-path) 并且您可以通过更改主 url 或括号中的 url 来独立管理两个组件的状态。请注意,您可以向每个网址添加参数,因此非常灵活。

关于Angular2 路由 : Multiple Components at once,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40194584/

相关文章:

html - 如何根据 Angular 7中特定行的列值默认选中复选框和选择框

node.js - Express中的多个可选路由参数?

php - laravel 4 中的路由问题

没有 'www' 前缀, meteor 链接不起作用

angular - 在 Angular2 服务中包装外部脚本

javascript - InvalidPipeArgument : '[object Object], [对象对象]、[对象对象]、[对象对象]、[对象对象]、[对象对象]、

networking - docker-machine:在某些 wifi 网络上,没有路由到默认 docker 机器(使用仅主机 vbox 网络)的主机

php - Laravel - 路由到 "views"内的文件夹

javascript - 执行 webpack.config 时出错 - 无法解析 'es6-promise'

jquery - Angular2 和 jQuery : How to call component level function?