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

问题描述

在angularJS ui路由器中，我们可以使用状态相同的路由使用2个组件(例如在此示例中，

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?

谢谢

推荐答案

您可以使用诸如以下参数的路由

You can have routes with parameters like

/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屋！