Angular2 - 具有相同路由的两个组件 [英] Angular2 - two components with the same route

问题描述

在 angularJS 中 ui-router 允许我们使用具有相同路由的 2 个组件使用状态(例如在这个例子中 Angular UI 路由器:具有相同 URL 的不同状态?).

In angularJS ui-router allows us to use 2 components with the same route using states (like in this example Angular UI Router: Different states with same URL?).

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

Is it possible to achieve the same behaviour in angular2? If it is could you link/provide some examples or workarounds?

这里的用例类似于 Facebook 或 Twitter，其中 URL 保持不变，但内容会根据您是否登录而变化.

The use case here would be something similar to Facebook or Twitter where the URL stays the same but the content changes depending on if you are logged in or not.

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

So far the only way I can think off to achieve this is using *ngIf in the 'parent' template to select selector of one of the two 'children' components. Something like this:

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

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

Are there any recommended ways to do this?

谢谢

推荐答案

你可以拥有像

/article/:id/detail

其中 /article/123/detail 和 /article/abc/detail 导致相同的组件.

Where /article/123/detail and /article/abc/detail lead to the same component.

例如参见本教程 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html(搜索使用参数配置路由")

See for example this tutorial https://angular.io/docs/ts/latest/tutorial/toh-pt5.html (Search for "Configure a Route with a Parameter")

这篇关于Angular2 - 具有相同路由的两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！