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

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

Answer 2

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

这是我的种子项目。

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