Angular2 - 同一路由下的两个组件

Question

Angular2 - 同一路由下的两个组件

angularangular2-routing

10

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

在Angular 2中是否有可能实现相同的行为？如果可能的话，您能否提供一些示例或解决方法的链接？

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

到目前为止，我唯一想到的实现方法是在“父”模板中使用*ngIf来选择两个“子”组件之一的选择器。类似于以下内容：

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

有没有推荐的方法来做这件事？

谢谢。

- dem00n

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Günter Zöchbauer · Answer 1

0

你可以使用参数创建路由，例如： /article/:id/detail 其中 /article/123/detail 和 /article/abc/detail 都指向同一个组件。

例如，查看此教程 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html （搜索“配置带参数的路由”）。

- Günter Zöchbauer

1

谢谢您的回答，但这不是我要找的。我需要的是一条路由根据条件引导到两个组件中的一个。就像这个伪代码：

请求 '/home';
如果 (已认证 == true):
    跳转到 'authenticated_home' 组件
否则:
    跳转到 'public_home' 组件

- dem00n

我明白了。我很确定路由器本身不提供任何支持。我想*ngIf是一个不错的解决方法。如果为已登录用户传递了路由但用户未登录（或反之亦然），那么使用不同的路由并自动重定向到另一个变体怎么样？就像这里所解释的那样：http://www.captaincodeman.com/2016/03/31/angular2-route-security/ - Günter Zöchbauer

1

我已经考虑过这个问题，但是这会改变浏览器中的URL，而我正试图避免这种情况。现在我将使用*ngIf，并查看是否有其他人提出了替代方案。 - dem00n

你可以使用自定义的router-outlet，像链接的博客文章中那样构建类似的方法，但不是仅仅重定向，而是添加一个不同的组件。你只需要一些全局替换组件 - 当当前路由配置了ComponentA且用户已经登录时，插入ComponentALoggedIn。这样，你就得到了一个通用的解决方案。 - Günter Zöchbauer

1

谢谢。实际上，这比在HTML中依赖条件语句要更简洁。 - dem00n