Question

比方说，我希望具有与facebook.com类似的设置。注销后，该URL的内容是常规主页，其中包含有关Facebook和登录表单的信息。登录后，这个相同的网址（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路由可以完成的事情吗？

Answer 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>

这样做，您通常可以在用户登录后将路由用作常规的角度应用程序。

Answer 2

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

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

请记住，尽管无论您在Angular中做什么，都仍然要在客户端上进行处理，所以根据您要保护的内容，您可能需要考虑在后端处理此用户检查应用。

在首页路径下有角度地路由多个组件

2 个答案: