今天完成的事情

1. 1. 将TopNavbarComponent和MainNavbarComponent两个组件作为NavbarComponent组件的子组件，实现一个路由导航两个组件；
2. 2. 将MainNavbarComponent的侧栏用动态生成来做，没有请求服务器数据，使用是假数据，自己写的一个，树结构也是改了好几次：

//数据直接写在服务里，到时候需要请求数据可以直接在服务里加就可以了，现在先用假的来做页面。
@Injectable()
export class GetMainNavbarItemsService {
  public mainList: any[] = mainList;
  constructor() { }
  //如果需要转换数据格式的话
  // changeFormat(){
  // }
}
let mainList: any[] = [
  // {name: '信息管理', tableId: 1, list: {name: ['信息展示', '信息列表'], listId: 1}},
  {name: '信息管理', tableId: 1, list: [{name: '信息展示', listId: 1}, {name: '信息列表', listId: 2}]},
  {name: '文章管理', tableId: 2, list: [{name: '文章列表', listId: 1}, {name: '文章文章', listId: 2}]},
  {name: '人才管理', tableId: 3, list: [{name: '新增人才', listId: 1}, {name: '删除人才', listId: 2}]},
  {name: '推荐管理', tableId: 4, list: [{name: '这是什么', listId: 1}, {name: '你行你猜', listId: 2}]},
  {name: '后台管理', tableId: 5, list: [{name: '炸了后台', listId: 1}, {name: '你不敢炸', listId: 2}]},
  {name: '用户管理', tableId: 6, list: [{name: '新增用户', listId: 1}, {name: '删除用户', listId: 2}, {name: '清空用户', listId: 3}]},
  {name: '内容管理', tableId: 7, list: [{name: '删了它吧', listId: 1}, {name: '你不敢删', listId: 2}]},
];

MainNavbarComponent的模板这样写：

<div>
  侧栏列表
  <ul *ngFor="let first of mainList">
    <a>{{first.name}}</a>
    <li *ngFor="let second of first.list"
        (click)="listInfo(first.tableId, second.listId)">
      {{second.name}}
    </li>
  </ul>
</div>

样式没有写，先实现功能。

明天计划的事情

有个bug明天解决了。再写一个列表的组件。

遇到的问题

这个bug就是：看我的子路由：

  {
    path: 'navbar',
    component: NavbarComponent,
    children: [
      {path: '', component: WelcomeComponent},
      {path: 'navbar11', component: WelcomeComponent},
      {path: '**', component: Code404Component},
    ]
  }

在组件中跳转：

  listInfo(tableId: number, listId: number){
    //get current route
    let routeLink: string = `./navbar${tableId * 10 + listId}`;
    console.log(`子路由跳转到：${routeLink}`);
    this.router.navigate([routeLink]);
  }

比如上面得到的路由是./navbar11，那么它应该跳转到的是/navbar/navbar11，可是它就是倔强的跳转到了navbar11，找了好久也没找到解决方法。
使用绝对路径导航就可以实现。。。

收获

基本没有什么收获呀，NgFor熟悉了一下。