我希望基本 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/