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

比如说要刷新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组件里显示的姓名信息

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

angular 4 路由变化的时候实时监测刷新组件的更多相关文章

  1. Angular 监听路由变化

    var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...

  2. apachetop 实时监测web服务器运行状况

    apachetop 实时监测web服务器运行状况   我们经常会需要知道服务器的实时监测服务器的运行状况,比如哪些 URL 的访问量最大,服务器每秒的请求数,哪个搜索引擎正在抓取我们网站?面对这些问题 ...

  3. Linux的watch命令 — 实时监测命令的运行结果

    Linux的watch命令 — 实时监测命令的运行结果 watch 是一个非常实用的命令,基本所有的 Linux 发行版都带有这个小工具,如同名字一样,watch 可以帮你监测一个命令的运行结果,省得 ...

  4. linux下实时监测命令运行结果工具:watch

    watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...

  5. Vue-- 监听路由变化,数据无法更新?

    之前写的Vue项目,有个问题困扰了好久.新闻板块有推荐.精华.最新等几个Tab,设想通过切换Tab,改变路由参数(get/news/:tab)去获取对应数据,然后渲染到页面(用的是同一套组件),问题来 ...

  6. AngularJS监听路由变化

    使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...

  7. angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

  8. linux下实时监测tomcat关闭并启动

    linux下tomcat总是会无故出现自动关闭的情况,在暂时无法解决该问题时,就需要一个东西能实时监测tomcat是否还正常的运行,若发现已关闭时,执行启动命令. 我们可以添加一个shell脚本来实现 ...

  9. 用ADB(Android Debug Bridge)实时监测Android程序的运行

      监控Android设备上程序的运行,需要ADB的配合,具体ADB工具的介绍以及命令选项可见博客: http://blog.csdn.net/mliubing2532/article/details ...

随机推荐

  1. 简单集成高大上的ImagePicker无标题文章

    简单集成高大上的ImagePicker无标题文章   现在是个项目就要有图片上传所以下面介绍一下简单高端的图片选择器 感谢读者的细心发现bug,最近bug已经修复(github更新)所以对文章部分内容 ...

  2. JqERY

    //下拉菜单样式 /*查找全部select的下拉菜单*/ function getElemsById(cot_val){ return document.getElementById(cot_val) ...

  3. 《Google软件测试之道》- Google软件测试介绍

    <Google软件测试之道>- Google软件测试介绍 2015-05-21 目录 1 质量与测试  2 角色  3 组织结构  4 爬.走.跑  5 测试类型  相关链接 与Micro ...

  4. 存储管理器实验——SDRAM

    序言:2440有nand和nor两种启动方式,在裸机部分,都是使用的nand启动. 现在,我们想在nand flash启动的时候,通过SRAM访问存储在外设SDRAM中的程序. nand启动,先把前4 ...

  5. 演练:创建和注册自定义 HTTP 模块

    本演练演示自定义 HTTP 模块的基本功能. 对于每个请求,都需要调用 HTTP 模块以响应 BeginRequest 和 EndRequest 事件. 因此,该模块在处理请求之前和之后运行. 如果 ...

  6. sql server自定义函数

    CREATE function [dbo].[f_testFunc]( ) ,) ) ) as begin ); ); ); ); SELECT @str_id = a.id,@str_code = ...

  7. 使用shell读取文本文件发送到kafka

    #!/bin/sh ## 参数定义 dt=`date +"%Y%m%d" -d "-1 days"` outpath=/xxxx_log_${dt}.txt b ...

  8. 1.svn+apache整合

    1:安装svn客户端, 并且在客户端下,能建立仓库,在自己的硬盘上,建一个库利用 file:///D:/xx/yy来管理自己的仓库. 2:把svn与apache整合. 2.1为什么与apache一起整 ...

  9. git clone 故障 fatal could not create work tree dir

    问题如上图,原因是openWRT目录权限的问题,该目录是新创建的查看目录权限后发现该目录只对root有读写权限,对所有者及其他用户无读写权限.最简单的chmod 777 openWRT即可解决问题.

  10. 如果可能的话,使用 PC-Lint、LogiScope 等工具进行代码审查

    如果可能的话,使用 PC-Lint.LogiScope 等工具进行代码审查. #include <iostream> #include <algorithm> #include ...