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組件里顯示的姓名信息

這個只用於路由發生變化的實時刷新，如果路由沒有變是不能進行實時刷新的