Angular2 - 具有相同路线的两个组件答案

【问题标题】：Angular2 - two components with the same routeAngular2 - 具有相同路线的两个组件
【发布时间】：2016-08-30 22:38:23
【问题描述】：

在 angularJS 中，ui-router 允许我们使用状态相同的 2 个组件（如本例中的 Angular UI Router: Different states with same URL?）。

是否可以在 angular2 中实现相同的行为？如果是，您可以链接/提供一些示例或解决方法吗？

此处的用例类似于 Facebook 或 Twitter，其中 URL 保持不变，但内容会根据您是否登录而发生变化。

到目前为止，我能想到的唯一方法是在“父”模板中使用 *ngIf 来选择两个“子”组件之一的选择器。像这样的：

<home-logged-in *ngIf="authenticated()"></home-logged-in>
<home-logged-out *ngIf="!authenticated()"></home-logged-out>

有没有推荐的方法来做到这一点？

谢谢

【问题讨论】：

【解决方案1】：

您可以使用带有类似参数的路线

/article/:id/detail

/article/123/detail 和 /article/abc/detail 指向同一个组件。

例如看这个教程https://angular.io/docs/ts/latest/tutorial/toh-pt5.html（搜索“Configure a Route with a Parameter”）

【讨论】：

感谢您的回答，但这不是我想要的。我需要的是 1 条有条件地通向 2 个组件的路线。就像在这个伪代码中一样：request '/home'; if (authenticated == true): 转到 'authenticated_home' 组件否则转到 'public_home' 组件
我明白了。我很确定路由器本身不为此提供任何支持。我猜*ngIf是一个很好的解决方法。如果为已登录的用户传递了一条路由但用户未登录（反之亦然），那么使用不同的路由并自动重定向到另一个变体怎么样？就像这里解释的captaincodeman.com/2016/03/31/angular2-route-security
我已经考虑过了，但是这会改变我试图避免的浏览器中的 URL。现在我会选择 *ngIf 看看是否有其他人提出替代解决方案。
您可以使用链接博客中的自定义路由器插座构建类似的方法，但不是重定向只是添加不同的组件。您只需要一些全局替换组件 - 当 ComponentA 在当前路由中配置并且用户已经登录时插入 ComponentALoggedIn 代替。这样您就可以得到一个通用的解决方案。
谢谢。实际上这比依赖 html 中的条件要干净得多。