Angular 2 : Serve a different homepage if the user is logged in

标签 angular routes

我希望基本 url / 根据用户是否登录显示不同的内容:

  • 未登录:显示 LandingPageComponent
  • 登录:显示 DashboardComponent

需要说明的是,/ 不应该重定向或更改 url,它应该只决定要显示的内容。

这是一件相当常见的事情(例如,Twitter 就是这样做的)。但问题是,我是 Angular 的新手,到目前为止我还没有找到一种直接的方法来做到这一点。我知道如何将不同的路径路由到不同的组件,但我不知道如何有条件地将单个路径路由到多个组件。解决此问题的最佳方法是什么?

请尽量让所有答案都对初学者友好。感谢您的帮助。

最佳答案

以上可以通过以下步骤完成

第一步:默认显示一个HomeComponent,它有下面的html代码

Step2:在HomeComponent的constructor/ngOnInit(视情况而定)决定用户是否登录。

注意:isLoggedIn 是一个 Observable。即 isLoggedIn: Observable;

HomeComponent 模板如下所示

<template [ngIf]="isLoggedIn | async">
<dashboard></dashboard>
</template>
<template [ngIf]="(!isLoggedIn | async)">
<login-page></login-page>
</template>

关于 Angular 2 : Serve a different homepage if the user is logged in,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41733734/

相关文章:

Angular 2模板表单验证不起作用

javascript - Angular 4显示当前时间

ruby-on-rails - 邮件预览无法正常工作,因为没有路由匹配

ruby-on-rails - 在Rails路线ID中有一个点

linux - accept_local 不起作用

node.js - 如何处理 Express 中过期的路线/ session ?

node.js - webpack 如何以及在哪里使用 tsconfig.file 和 tsc

没有路由器 socket 的 Angular 4 路由器

java - 如何从 maps.googleapis 获取 3 点之间的方向

javascript - 循环依赖,当 ovveriding ExceptionHandler