Angular 4 monitors and refreshes components in real time when routing changes

Refresh components when routes change

For example, to refresh the header component

in 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) => {
         // Refresh the component when the route changes and the user information stored in the browser changes 
        this .userinfo = getUserInfo();
        console.log(this.userinfo);
      });
  }
}

For example, when the user modifies the name information, the name information displayed in the header component will be partially refreshed

This is only used for real-time refresh when the route changes. If the route has not changed, real-time refresh cannot be performed.