Question

试图弄清楚如何在公共和安全之间分隔布局。

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

基本上我想要实现的目标：

公开（非安全）

-Login
-Registration
- 更改密码

没有md-toolbar和md-sidenav

的布局

安全

控制台
资料
的AddItem

只有在登录后才能访问，并且具有md-toolbar和md-sidenav

的布局

如果有任何人有关于plunker或类似的工作示例将非常感谢。

Answer 1

您可以通过正确使用路由和组件配置来完成此任务。

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

请注意，在我的示例中，安全组件将通过“安全/仪表板”和“安全/配置文件”进行访问。

您可以根据您希望网址的工作方式进行更改，但概念保持不变

修改

添加一些例子，

的index.html

<html> <head> ..... </head> <body> <my-app></my-app> (or whatever your app selector is) </body> </html>

APP-component.html

请注意，app组件不会添加任何布局

<强> PublicRootComponent

<h1>I am public root</h1> <div class="public-root-styling"> <router-outlet></router-outlet> </div>

您可以为公共页面创建布局，并将路由器插座标记放在您想要嵌套内容的整体布局中。

<强> SecureRootComponent

<md-sidenav-container> <md-toolbar> I am secured content layout</md-toolbar> <router-outlet></router-outlet> </md-sidenav-container>

同样适用于安全根 - 在该组件本身内创建您的布局，并使用路由器插座标记来标记您希望安全组件被内容注入的位置。

这有意义吗？

Answer 2

您可以使用实施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]

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

2 个答案: