主页路径下的角度路由多个组件答案

【问题标题】：Angular routing multiple components under home page path主页路径下的角度路由多个组件
【发布时间】：2019-02-11 20:47:55
【问题描述】：

假设我想要一个与 facebook.com 类似的设置。注销后，此 url 的内容是一个常规主页，其中包含有关 facebook 和登录表单的信息。登录后，这个相同的 url（facebook.com，没有特定路由）现在显示数据源。

实现这个的正确方法是什么？

我想过简单地拥有类似的东西：

<div *ngIf="isLoggedIn; else loggedOut">
  <internal-dashboard-component></internal-dashboard-component>
</div>

<ng-template #loggedOut>
  <external-home-component></external-home-component>
</ng-template>

但这似乎有点复杂。

这是一种合乎逻辑的方法吗？有什么东西可以用我缺少的 Angular 路由来完成吗？？

【问题讨论】：

标签： angular angular-router

【解决方案1】：

Angular 有一个叫做 URL Matcher 的东西。它用于您指定的情况，同一路径下的两个组件。你可以阅读更多关于它的信息here。

它的使用看起来像这样：

{
 path: 'Path',
 matcher: firstMatcher,
 loadChildren: '../login/login.module'
},
{
 path: 'Path',
 matcher: secondMatcher,
 loadChildren: '../dashboard/dashboard.module'
}

您可以阅读更多关于如何实现它in this comment 的类似问题（如何将两个组件放在同一路径下）。

另外，您的解决方案也是可行的。我会添加一些调整以使其更易于实施。

<div *ngIf="!isLoggedIn">
  <internal-dashboard-component></internal-dashboard-component>
</div>

<router-outlet *ngIf="isLoggedIn"></router-outlet>

通过这样做，您可以在用户登录时正常使用您的路由作为常规 Angular 应用程序。

【讨论】：

啊，网址匹配器。我没听说过这个。谢谢！

【解决方案2】：

您还可以在应用程序首次启动时检查用户是否已登录，然后使用而不是 *ngIf 以编程方式路由用户：

this.router.navigate(['/home']);

请记住，尽管您在 Angular 中所做的一切仍然是在客户端处理的，因此根据您要保护的内容，您可能需要考虑在您的后端处理此用户检查应用。

【讨论】：