Angular 如何在安全页面和非安全页面之间分离布局

试图找出如何在公共和安全布局之间分离布局

我读到在设置路线时，有一个关于儿童的概念，但找不到一个实施这一概念的例子

基本上是我想要实现的：

公共（无担保）

• -登录
• -登记
• -更改密码

没有md工具栏和md侧导航的布局

稳妥

• 仪表板
• 侧面图
• 附加项

只有在登录后才可访问，并且具有带有md工具栏和md sidenav的布局

---

如果任何人有plunker或类似产品的工作示例，我们将不胜感激。

您可以通过正确使用布线和组件配置来完成这一点

AppComponent - no layout goes here
  children: 
     path: '', PublicRootComponent -  Add your layout for your public component to this guy. 
                                      He has an embedded router-outlet to put the nested content
                                      into the correct position
      children:   <- these children will use public's layout
        path: 'login', LoginComponent    
        path: 'registration', RegistrationComponent

     path: 'secure', SecureRootComponent - add your layout for your secured components
                                         - again, this has a router-layout 
                                           to put nested content in correct position
        children: <- these children will use secure's layout

           path: 'dashboard', DashBoardComponent
           path: 'profile', ProfileComponent 

AppComponent-此处没有布局
儿童：
路径：“”，PublicRootComponent-将公共组件的布局添加到此文件。
他有一个嵌入式路由器插座来放置嵌套内容
进入正确的位置
子项：您可以通过正确使用路由和组件配置来实现这一点

AppComponent - no layout goes here
  children: 
     path: '', PublicRootComponent -  Add your layout for your public component to this guy. 
                                      He has an embedded router-outlet to put the nested content
                                      into the correct position
      children:   <- these children will use public's layout
        path: 'login', LoginComponent    
        path: 'registration', RegistrationComponent

     path: 'secure', SecureRootComponent - add your layout for your secured components
                                         - again, this has a router-layout 
                                           to put nested content in correct position
        children: <- these children will use secure's layout

           path: 'dashboard', DashBoardComponent
           path: 'profile', ProfileComponent 

AppComponent-此处没有布局
儿童：
路径：“”，PublicRootComponent-将公共组件的布局添加到此文件。
他有一个嵌入式路由器插座来放置嵌套内容
进入正确的位置
子项：您可以使用实现CanActivate的AutoGuard

export class  AutoGuard implements CanActivate{
  constructor(private _sessionService : SessionService){}
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    //Some condition
    return true;
  }
}

听你的话

path: 'some-path',
component: YOUR_SECURE_COMPONENT ,
canActivate : [AutoGuard]

您可以使用实现CanActivate的AutoGuard

export class  AutoGuard implements CanActivate{
  constructor(private _sessionService : SessionService){}
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    //Some condition
    return true;
  }
}

听你的话

path: 'some-path',
component: YOUR_SECURE_COMPONENT ,
canActivate : [AutoGuard]

我一有机会就给这个做个测试。如果它真的做到了，这个技巧将非常棒，你将成为我的即时朋友：）。（这让我快发疯了。）我一有机会就给这个做个测试。如果它真的做到了，这个技巧将非常棒，你将成为我的即时朋友：）。（这让我抓狂）。这与多布局设置有什么关系？您如何告诉应用程序区分布局？您需要在安全路由之后添加具有相同路径且没有防护的其他路由。这与多个布局设置有何关系？您如何告诉应用程序区分布局？您需要在安全路由后添加其他具有相同路径且无防护的路由。