今天完成的事情

今天一天就做了一件事，解决了昨天的两个bug。

1. 1. 点击登陆按钮，地址栏将表单的信息自动变成query参数显示在地址栏，以至于页面跳转错误。
   经过挨个组件排查，发现原因是由于使用了表单自带的submit属性。改用Angular 4自带的ngSubmit属性就好了。但是还是有一点不明白，在表单中已经使用了novalidate禁用了表单自带的属性，可是依然执行了表单的submit事件绑定。
2. 2. 登录后用户信息不能自动更新。
   如果用户没有登录，默认情况下显示的是·路人·，当登录之后应该显示为当前用户信息，但是实际上数据并没有更新，还是登录之前的·路人·。理清了各个组件和服务的初始化过程，发现当服务初始化的时候数据会更新一次，但是组件中并不会更新，所以将初始化放在组件中，每次路由到当前组件的时候都初始化一次数据，这样数据就会得到及时更新。更改之后，将数据放在Angular自带的OnInit钩子中去初始化。当初始化组件的时候数据就会得到更新。

明天计划的事情

写一下侧栏，用子路由来实现。

遇到的问题

理清组件之间的逻辑关系很重要，遇到的问题就是昨天的bug，今天算是都解决了。

收获

确认登录的服务初始化数据比较多，且需要每次在组件中初始化，所以写成了一个方法

//be-sure-login.service.ts
//...
  public checkStatus() {
    //the currentUser of localStorage be saved in login.component.ts
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    console.log('在be-sure-login.service中读取的用户信息为：' + this.currentUser);
    try {
      this.notLogined = !this.currentUser;
    }
    catch (err) {
      console.log('currentUser中的错误信息是：' + err.message);
    }
    console.log('用户未登陆？：' + this.notLogined);
    //if haven't login, back to LoginComponent
    this.notLogined ? this.router.navigate(['/login']) : null;
  }

昨天的代码，改了一下。
然后这个服务放在OnOnot钩子中，或者组件的构造函数中，就可以实现数据的更新。

//top-navbar.component.ts
//...
//写在构造函数当中
  constructor(private beSureLogin: BeSureLoginService, private loginService: LoginService) {
    this.getUserInfo();
  }
//写在OnInit钩子中
  ngOnInit() {
    this.getUserInfo();
  }

这样每次创建组件的时候都会更新数据。但，如果是同页跳转这样就行不通了，因为组件只会创建一次，每次回来不会更新。可以使用路由参数Matrix订阅来实现。
大概明天可能会用到这个方法。