Angular 2个多路由器插座

Question

我有一个使用 Angular cli 创建的 Angular 2 应用程序，我的 app.component.html 看起来像这样：

<app-navigation></app-navigation>

<app-top-navbar></app-top-navbar>

<router-outlet></router-outlet>

<app-footer></app-footer>

<app-right-sidebar></app-right-sidebar>

在我的路线中，如果没有在 localStorage 中注册令牌，我会告诉 angular 重定向到 /Login :

canActivate(): boolean {
    if (!localStorage.getItem('token')) { 
        this.router.navigate(['/login']);
        return false;
    }
    return true;
}

这非常有效，但我的问题是我想显示 /Login (LoginComponent) 不是带有侧边栏、菜单和页脚的路由器插座，而是在没有其他组件的路由器插座中。

知道怎么做吗？

Answer 1

是的，您可以嵌套路由器插座。

这是我的种子项目。

https://github.com/danday74/angular2-coverage/tree/master/app

Answer 2

除了确保在路由数组中为登录组件定义了路由外，您无需特别执行任何操作即可将登录组件连接到默认值。但是，如果您希望它显示在页面的某个区域，例如，您可能希望将它放在一个命名的插座中。为此，您只需在路由组件中指定出口，如下所示： { path: 'login', component: myLoginComponent, outlet: 'leftSidebar', children: [] } 官方文档有关于如何 set up the routing component.

的说明

Angular 2个多路由器插座

Angular 2 multiple router outlets

angular2-routing

angular-cli

angular