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>

在我的路线中，我有这个条件告诉angular重定向到/ Login如果在localStorage中没有注册令牌：

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

这完美地工作，但我的问题是，我想显示/ Login（LoginComponent）不是这个路由器插座与侧边栏，菜单和页脚，但在其自己的路由器 - oulter没有其他组件。

关于如何做的任何想法？

Answer 1

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

这是我的种子项目，就是这样。

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

Answer 2

除了确保在路由阵列中为登录组件定义了路由之外，您不必特别将登录组件连接到默认值。但是，如果您希望它显示在页面的某个区域中，您可能希望将其放在指定的插座中。为此，您只需在路由组件中指定插座，如下所示： import csv def get_data_list(data_file): data_file = open("table.csv", "r") data_list = [] for line_str in data_file: data_list.append(line_str.strip().split(',')) return data_list def get_month_averages(data_list): date_list = [] vol_list = [] adjclos_list = [] for row in data_list: date_list.append(row[0]) vol_list.append(row[5]) adjclos_list.append(row[6]) all_list = [date_list, vol_list, adjclos_list] return all_list print (get_month_averages(data_list)) 官方文档有关于如何set up the routing component的说明。

Angular 2多个路由器插座

2 个答案: