今天完成的事情

1. 1. 写了一级路由的跳转

//app-routing.ts
//...
const routes: Routes = [
  {
    path: '',
    redirectTo: "main-navbar",
    pathMatch: 'full'
  }, {
    path: 'login',
    component: LoginComponent,
  }, {
    path: 'main-navbar',
    component: TopNavbarComponent,
  }, {
    path: 'main-navbar',
    component: MainNavbarComponent,
  }, {
    path: '**',
    component: Code404Component,
  },
];
@NgModule ({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule {
}

上面路部分有两个main-navbar，分别是顶栏和侧栏，不知道这样写有没有什么问题，这样写了只有还是可以写两个路由分别跳转的吧，比如这样：

{
    path: 'top-navbar',
    component: TopNavbarComponent
  }, {
    path: 'mainnavbar',
    component: MainNavbarComponent
  }

这样写应该也是可以实现单独跳转显示的吧。
两个页面的具体内容完全没有写。
路由的跳转可以实现。

2. 2. 写了已登录用户验证：
   a. 使用一个服务来确定登录状态

//be-sure-login.service.ts
//...
const NOT_LOGIN: string = '路人';
@Injectable()
export class BeSureLoginService{
  private notLogined: boolean = true;
  private currentUser: CurrentUser;
  constructor(private router: Router) {
    //the currentUser of localStorage be saved in login.component.ts
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    //下面这句不能取代三目运算符，只是取非
    this.notLogined = !this.currentUser.data.manager.status;
    //if haven't login, back to LoginComponent
    this.notLogined ? this.router.navigate(['/login']) : '';
  }
  getCurrentUserRole(): string {
    // console.log(this.currentUser.data.manager.name);
    return this.notLogined ? NOT_LOGIN : this.currentUser.data.manager.name;
  }
  getCurrentUserName(): string {
    // console.log(this.currentUser.data.role.name);
    return this.notLogined ? NOT_LOGIN : this.currentUser.data.role.name;
  }
}

b. 写一个单独的登出服务来退出登录，感觉不划算，将登出服务写在了登录服务里面，成了登录服务的一个方法：

//...
  public logout(): void{
    localStorage.removeItem('currentUser');
    // turn to login page
    this.router.navigate(['/login']);
  }
//...

当然，这样写有一个问题，现在还没有发现是啥问题，只是有一个警告：Promise returned form navigate is ignore...看来我忽略了一个返回值，我想想，这个还不是致命错误，致命错误在下面。

明天计划的事情

1. 这个bug要解决
2. 很显然要看一下怎么在Angular 4 中引入对应的ngx-bootstrap
3. 一个点一个点来，不能慌。

遇到的问题

在上面，当我将LogoutService从一个单独我服务写成LoginService的一个方法方法的时候(虽然之前也是进入到LogoutSerivce的时候就报错)，出现了很多错误：
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'data' of null TypeError: Cannot read property 'data' of null
这个是主要错误，后面的一片应该是Angular编译时的错误。上面看到，data的属性为空，data是服务器返回的数据中的一项，保存在localstorage,取出来是没有问题的(在改成单独方法的时候已经打印出来看过了)，这个原因有点纠结。

收获

上面这些都是用的比较基础的一些东西，还没到路由传参部分，那部分会用到比较多的Rxjs知识，还有有些难度的。