angular 4 路由变化的时候实时监测刷新组件

当路由变化的时候刷新组件

比如说要刷新header组件

在header.ts里

import {Router, NavigationEnd} from "@angular/router";
import {getUserInfo, setUserInfo} from "../../../../storage/user-info";

@Component({
  selector: 'app-header1',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements  OnInit {

constructor(private router: Router) {
    router.events
      .filter((event) => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
        // 当路由发生变化，存储在浏览器里面的的用户信息发生变化的时候刷新组件
        this.userinfo = getUserInfo();
        console.log(this.userinfo);
      });
  }
}

比如说当用户修改了姓名信息之后，就会局部刷新header组件里显示的姓名信息

这个只用于路由发生变化的实时刷新，如果路由没有变是不能进行实时刷新的