如何设计正确的Angular组件结构？

Question

我已经使用CLI构建了具有标准结构的Angular。应用程序的入口默认为app.module。

app.module -> app.component

在模板app.component.html中：

<router-outlet>
</ router-outlet>

此模板仅在授权后才可见。

问题是，当我请求授权页面（登录页面）时，它会插入到此私有模板中。怎么了？登录页面应作为单独的页面。

如何组织它？

问题在图片中进行了描述：

Answer 1

您要在登录前保密的不是您的根组件。您要保密的是除登录组件之外的所有页面组件。

因此，您仅需要如下所示的路由配置：

[
  { 
    path: 'login', 
    component: LoginComponent 
  },
  { 
    path: '', 
    canActivate: [AuthenticatedGuard], 
    children: [
        all your other pages here
    ]
  }  
]

如果用户尚未通过身份验证，那么AuthenticatedGuard应该阻止激活并导航到登录路径。

关于问题的第二部分。问题在于您的根组件模板所包含的内容远远超出了您在第一部分中所声称的：它除了路由器出口外还包含一个左侧菜单。从根组件中删除该控件，因为您不希望所有页面上都有该侧边栏：登录页面不应包含该侧边栏。相反，将其放在单独的“子根”组件中，我们将其称为主组件。该组件应具有左侧菜单，并在其模板中具有（第二个）路由器出口。

 [
  { 
    path: 'login', 
    component: LoginComponent 
  },
  { 
    path: '', 
    canActivate: [AuthenticatedGuard], 
    component: MainComponent,
    children: [
      // all your page components here
    ]
  }  
]

一种替代方法是将其保留在答案的第一部分中，并只需在左侧菜单上添加*ngIf即可测试用户是否通过了身份验证。