带有不同模板的Angular2路线

问题描述 投票:2回答:0

也许我不了解所需的概念,所以如果已经有答案或教程,只需指出我的方向,我就会研究那里...

我正在创建一个Angular 2 Web应用程序,但我难以理解设置内容的最佳方法,因此在通过身份验证与未通过身份验证时,我具有特定的视图。

我最初是通过一个包含四个组件的组件创建许多页面的:页眉,侧面导航栏,正文,页脚。 但是,页眉,侧面导航栏,正文和页脚的内容仅对经过身份验证的用户真正可用,并且当我尝试创建新组件(即应该位于其他组件之前的登录组件)时,它会保留进入身体部位。 从我对路由器插座的了解来看,这对我来说很有意义,我只是不知道如何分隔应用程序的两个区域(已认证视图与未认证视图)。

我正在阅读Route Guards,它将帮助我相应地引导流量。 对我来说,更大的问题是我现在想实现身份验证,并且由于我希望在经过身份验证的视图和未经身份验证的视图之间具有不同的模板布局,因此除了保护措施之外,我还需要进行其他研究以帮助正确路由用户并显示内容适当吗? 我应该阅读Angular2路由器的哪些内容,以确保没有丢失部分设置吗?

就像一个简短的讨论示例一样,这是我希望网站如何运行的布局(它不是目录结构,而只是概念布局)。 再次,经过身份验证的视图具有header / navbar / body / footer布局,而未经身份验证的视图则不会具有该布局,这只是一个简单的页面:

  1. 认证视图:
    • 仪表板
    • 用户资料
  2. 未经身份验证的视图:
    • 登录窗口

任何帮助将不胜感激! 提前致谢。

angular angular2-routing angular2-components
© www.soinside.com 2019 - 2024. All rights reserved.