Angular 在主页路径下路由多个组件

Question

假设我想要一个与 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 路由可以解决我遗漏的问题吗？？

Answer 1

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

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

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

Answer 2

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 应用程序正常使用。

Angular 在主页路径下路由多个组件

Angular routing multiple components under home page path

angular

angular-router