Angular2 路由 : Multiple Components at once

Question

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

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

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

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

Answer 1

您想要的可以通过 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 来独立管理两个组件的状态。请注意，您可以向每个网址添加参数，因此非常灵活。